JS實(shí)現(xiàn)回到頁面頂部動(dòng)畫效果的簡(jiǎn)單實(shí)例

    最近在模仿各大網(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)畫效果的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考