欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2016年05月24日 15:27:36   投稿：jingxian  
下面小編就為大家?guī)?lái)一篇JS實(shí)現(xiàn)回到頁(yè)面頂部動(dòng)畫效果的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

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

//頁(yè)面加載后觸發(fā)
window.onload = function(){
  var btn = document.getElementById('btn');
  var timer = null;
  var isTop = true;
  //獲取頁(yè)面可視區(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";
    };
  //回到頂部過(guò)程中用戶滾動(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)回到頁(yè)面頂部動(dòng)畫效果的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論