当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript实现回到顶部功能

JavaScript实现回到顶部功能

2018年04月19日  | 移动技术网IT编程  | 我要评论

html代码

<p id="box"></p>

css代码

* {  
           margin: 0;  
           padding: 0;  
       }  
  
       body {  
           height: 3000px;  
       }  
  
       #box {  
           width: 100px;  
           height: 100px;  
           background: red;  
           position: absolute;  
           right: 0;  
       }

JS代码

var oBox = document.getElementById("box");  
   var timer = null;  
   var iH = document.documentElement.clientHeight;  
   oBox.style.top = iH / 2 - oBox.offsetHeight / 2 + "px";  
   document.onscroll = function () {  
       var iT = document.documentElement.scrollTop || document.body.scrollTop;  
       var iTarget = Math.round(iH / 2) - Math.round(oBox.offsetHeight / 2) + iT;  
  
       move(oBox, iTarget);  
   };  
  
   function move(obj, iTarget) {  
       clearInterval(timer);  
       timer = setInterval(function () {  
           var speed = (iTarget - obj.offsetTop) / 8;  
           speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  
  
           if (obj.offsetTop == iTarget) {  
               clearInterval(timer);  
           } else {  
               obj.style.top = obj.offsetTop + speed + 'px';  
           }  
       }, 30)  
   }

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网