最近在模仿各大網(wǎng)站寫頁面樣式和交互，發(fā)現(xiàn)好多都有回到頂部的需要，所以寫了一下js，記錄下來。

發(fā)現(xiàn)還可以添加從快到慢的動(dòng)畫效果和隨時(shí)下拉滾動(dòng)條停止?jié)L動(dòng)的功能， 參考了imooc上相關(guān)課程，最終實(shí)現(xiàn)JS代碼如下：

//頁面加載后觸發(fā)

window.onload = function(){

  var btn = document.getElementById('btn');

  var timer = null;

  var isTop = true;

  //獲取頁面可視區(qū)高度

  var clientHeight = document.documentElement.clientHeight;

  //滾動(dòng)條滾動(dòng)時(shí)觸發(fā)

  window.onscroll = function() {

  //顯示回到頂部按鈕

    var osTop = document.documentElement.scrollTop || document.body.scrollTop;

    if (osTop >= clientHeight) {

      btn.style.display = "block";

    } else {

      btn.style.display = "none";

    };

  //回到頂部過程中用戶滾動(dòng)滾動(dòng)條，停止定時(shí)器

    if (!isTop) {

      clearInterval(timer);

    };

    isTop = false;

  };

  btn.onclick = function() {

    //設(shè)置定時(shí)器

    timer = setInterval(function(){

      //獲取滾動(dòng)條距離頂部高度

      var osTop = document.documentElement.scrollTop || document.body.scrollTop;

      var ispeed = Math.floor(-osTop / 7);

      document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;

      //到達(dá)頂部，清除定時(shí)器

      if (osTop == 0) {

        clearInterval(timer);

      };

      isTop = true;

    },30);

  };

};

以上這篇JS實(shí)現(xiàn)回到頁面頂部動(dòng)畫效果的簡單實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考