一、JQ实现

布局  、 滚动条长度到达某个值时出现‘返回顶部’、点击实现

1  
     
      返回顶部
     

 

//返回顶部function scrolTolTop(scrollTo, time) {    var scrollFrom = parseInt(document.body.scrollTop);    $(document).scrollTop(scrollTo)}

 

  $(document).ready(function () {    }）

1  $(window).scroll(function () {2             //返回顶部隐藏或显示3             if ($(window).scrollTop() > 200) {4                 $('.go-top').show();5             } else {6                 $('.go-top').hide();7             }8             9         })

二、js

“回到頂部”功能可以使用a標籤的錨點實現，也可以使用js的onclick事件實現。

關鍵步驟：1.html+css佈局

               2.滾動條到滾動到一定高度時候，顯示按鈕“回到頂部”（若還沒有到一定高度，則隱藏）

               3.點擊按鈕實現回到頂部：scrollTop = 0;

具體如下：

 

html:實現頁面效果

        
     
                 hello: top          
          
     
     
     
                     中間有很多內容    
     
 
          
     
           
          
     

css:

#hiddenShow {
           position:fixed; /*定位在页面的底部*/        bottom:0;        border:30px solid red;              }    .divHidden{
            display:none;    }    .divShow{
            display:block;    }

js:

window.onload = function () {                        // 顯示或者隱藏Div:回到頂部            window.onscroll = function () {                var div_hidden = document.getElementById("hiddenShow");                var t = document.documentElement.scrollTop || document.body.scrollTop; // IE: document.documentElement.scrollTop                if (t > 100) {                    div_hidden.className = "divShow";                }                else {                    div_hidden.className = "divHidden";                }                // 顯示滾動條高度：                var text_input = document.getElementById("text_input");                text_input.value = "顯示滾動條高度：" + t;  //    alert(t);            };            //點擊回到頂部            var cgotop = document.getElementById("cgotop");            cgotop.onclick = function () {                document.getElementsByTagName('body')[0].scrollTop = 0;                document.getElementsByTagName('html')[0].scrollTop = 0;  // jq:     $('body,html').animate( { scrollTop: 0 },   1000  );                   return false;            };        };

 

類似效果圖:點擊回到頂部