Javascript實現返回頂部按鈕

一個網頁內容一多, 就會分屏顯示數據, 如果屏目很多, 用戶訪問的數據已經到了頁面的底部, 這時候返回到頂部也是需要一點時間. 這樣對用戶體驗來說, 可能就稍微遜了一點. 所以頁面數據多的網頁, 現在都會用一個"返回頂部"按鈕來快速跳轉到網頁的頂部.

那現在我們就來實現這么一個功能.

這個頁面我們就不寫什么數據, 直接就加入一個a標簽來作為返回頂部的按鈕, 并給他一個class名稱:top.

<a href="#" class="top">頂部</a>

然后設置其樣式表:

body {
    height: 3000px;
}

.top {
    position: absolute;
    top: 120px;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-decoration: none;
    text-align: center;
    background-color: #666666;
    color: #ffffff;
    right: 10px;
    transition: all 0.3s;
     visibility: hidden;
}
.top:hover {
    background-color: #ff3300;
}</pre> 
 
這里body設定為3000的高度, 主要是讓頁面有滾動的效果. 按鈕一般都是放在網頁的右邊靠下一點的位置. 這里我們通過position來設置.

我們還要分析一下, 當用戶的訪問的網頁在頁面的頂部時, 這個按鈕肯定是不顯示的. 所以我們這里用了visibility來控制按鈕的顯示與否.
界面很簡單, 我們就先將就一下. 下面來分析JS的實現.
首先這個按鈕是在整個網頁的效果上, 因此監聽滾動事件需要設置在整個窗口上. 因此,我們給window設置一個onscroll事件.
 
  
代碼名稱

  
window.onscroll = function (e) {...}
 
 
在這個事件里我們來控制返回頂部按鈕的上下位置, 和是否顯示. 首先來完成上下位置的控制.
上下位置的控制, 我們肯定得計算scrollTop的高度, 以及網頁單屏顯示的高度. 當用戶進入頁面的時候, 我們默認給這個按鈕放置在頁面右中部位置. 這時候的計算是:
 
  
代碼名稱

  
var n_half_height = window.screen.height / 2;
 
 
將這個值賦給按鈕的top屬性.
然后如果用戶滾動的時候, 位置肯定是保持不變的, 這時候的計算應該是
var n_stop = e.target.scrollingElement.scrollTop; //獲取scrollTop的高度
var n_top = n_stop + n_half_height;//得到位置
 
 
這是e 對象是onsroll里的參數event. 這里我使用的是谷歌瀏覽器.其他瀏覽器未測試. 如果需要兼容, 大家可以處理一下.

 每滾動都得計算其高度, 所以這個應該是放入在onscroll事件中.然后, 將這個值賦給按鈕的top屬性. 
當然不要忘記一件事, 就是scrollTop為0的時候, 按鈕不需要顯示. 大于0的時候, 得讓按鈕顯示. 前面講過我們用visibility這個屬性來控制的.這樣代碼就完整了.
var ele_body = document.body;
var ele_top = document.getElementsByClassName("top")[0];
var n_half_height = window.screen.height / 2;
ele_top.style.top = n_half_height + "px";
window.onscroll = function (e) {
  var n_stop = e.target.scrollingElement.scrollTop;
  if (n_stop === 0 ) {
      ele_top.style.visibility = "hidden";
  }else {
      ele_top.style.visibility = "visible";
  }
  var n_top = n_stop + n_half_height ;
  ele_top.style.top = n_top + "px";
}
 
 
最后的效果展示:

  
 本文屬于吳統威的博客, 微信公眾號:bianchengderen,QQ群:186659233 的原創文章,轉載時請注明出處及相應鏈接:http://www.wutongwei.com/front/infor_showone.tweb?id=214 ,歡迎大家傳播與分享. 
 </div>