jQuery中頁面返回頂部的方法總結(jié)

更新時(shí)間：2016年12月30日 14:03:55 作者：wudipmd

本文給大家總結(jié)了關(guān)于jquery中頁面返回頂部的方法小結(jié)，以及各個(gè)方法的優(yōu)缺點(diǎn)介紹，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧

當(dāng)頁面過長時(shí)，通常會(huì)在頁面下方有一個(gè)返回頂部的button，總結(jié)一下，大概三種實(shí)現(xiàn)方法，下面說下各方法及優(yōu)缺點(diǎn)。

方法一錨點(diǎn)定位

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

這種方法設(shè)置方便，但缺點(diǎn)是會(huì)刷新頁面（我是在同事的樂視手機(jī)上發(fā)現(xiàn)的）。

方法二 window.scrollTo(x,y)

<a href="javascript:scrollTo(0,0)" class="top" id="top">返回頂部</a>

這種方法也很方便，并且不會(huì)刷新頁面，缺點(diǎn)是沒有滾動(dòng)效果。

scrollTo接收的參數(shù)用來定位視口左上角在整個(gè)滾動(dòng)內(nèi)容區(qū)域的坐標(biāo)，比如我設(shè)置scrollTo(100,100)，就是讓滾動(dòng)內(nèi)容的坐標(biāo)（100,100）的點(diǎn)處在視口的左上角。

方法三設(shè)置帶有動(dòng)畫效果的滾動(dòng)

原生方法

/* html部分 */
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<a href="javascript:;" class="top" id="top">返回頂部</a>
</body>
<style>
/* css部分 */
div {
  height: 150px;
}
div:nth-child(odd) {
  background-color: #8ae238;
}
div:nth-child(even) {
  background-color: #66d9ef;
}
.top {
  position: fixed;
  right: 50px;
  bottom: 50px;
  display: block;
  width: 50px;
  height: 50px;
  font-size: 20px;
  background-color: white;
  display: none;
}
</style>
<script>
/* js代碼 */
  var topBtn = document.getElementById('top');
  // 獲取視窗高度
  var winHeight = document.documentElement.clientHeight;
  window.onscroll = function () {
    // 獲取頁面向上滾動(dòng)距離，chrome瀏覽器識別document.body.scrollTop，而火狐識別document.documentElement.scrollTop，這里做了兼容處理
    var toTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 如果滾動(dòng)超過一屏，返回頂部按鈕出現(xiàn)，反之隱藏
    if(toTop>=winHeight){
      topBtn.style.display = 'block';
    }else {
      topBtn.style.display = 'none';
    }
  }
  topBtn.onclick=function () {
    var timer = setInterval(function () {
      var toTop = document.documentElement.scrollTop || document.body.scrollTop;
      // 判斷是否到達(dá)頂部，到達(dá)頂部停止?jié)L動(dòng)，沒到達(dá)頂部繼續(xù)滾動(dòng)
      if(toTop == 0){
        clearInterval(timer);
      }else {
        // 設(shè)置滾動(dòng)速度
        var speed = Math.ceil(toTop/5);
        // 頁面向上滾動(dòng)
        document.documentElement.scrollTop=document.body.scrollTop=toTop-speed;
      }
    },50);
  }
</script>

大概的思路就是：

為window綁定scroll事件，監(jiān)聽頁面滾動(dòng)距離，當(dāng)超過一屏高度時(shí)，顯示返回頂部的按鈕

為按鈕綁定點(diǎn)擊事件，返回頂部的方法就是獲取頁面滾動(dòng)的距離，然后計(jì)算步長，這里采用滾動(dòng)距離除以5的方式，滾動(dòng)速度由快到慢。這里使用定時(shí)器控制滾動(dòng)的頻率，建議設(shè)置較小一點(diǎn)的值，如果時(shí)間間隔過大會(huì)有‘跳幀'的感覺。
這種方法優(yōu)點(diǎn)是有了動(dòng)畫效果，只是實(shí)現(xiàn)起來比較麻煩，下面介紹一下jQuery方法。

jQuery方法

jQuery方法只是在js代碼部分不同，具體代碼如下

<script>
/* js代碼 */
$(window).on('scroll', function () {
  // 判斷顯示還是隱藏按鈕
  if($(this).scrollTop()>=$(this).height()){
    $('#top').fadeIn('slow');
  }else {
    $('#top').fadeOut('slow');
  }
});
$('#top').on('click',function () {
  // 設(shè)置滾動(dòng)動(dòng)畫，這里注意使用的是$('body')不是$(window)
  $('body').animate({scrollTop:'0'},500);
});
</script>

jQuery方法的優(yōu)點(diǎn)是方便，而且動(dòng)畫效果比較流暢。

這里需要注意設(shè)置animate方法時(shí)使用的是jQuery封裝的body對象而不是window對象，因?yàn)槲覀兪且O(shè)置body的scrollTop屬性。

總結(jié)

三個(gè)方法各有優(yōu)劣，不過總體來講，jQuery的方法更適合大多數(shù)場景。

以上所述是小編給大家介紹的jQuery中頁面返回頂部的方法總結(jié)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: