运动-模拟返回顶部

第一步：获取底部的那个按钮对象，默认的情况下那个按钮对象是不可见的。可见的条件的是滚轮距离顶部有距离。 var oBtn=document.getElementById('btn1');

第二步：添加滚轮事件。 (1). 获取滚轮距离顶部的距离。如果距离大于0，就将按钮对象可见。 var scrollT=document.documentElement.scrollTop||document.body.scrollTop; if(scrollT >0){ oBtn.style.display='block'; }else{ oBtn.style.display='none'; };

第三步： (1).获取滚动条到顶部的距离，这个距离就是滚动条需要向上滚动到顶部的全部路程。 var scrollT=document.documentElement.scrollTop||document.body.scrollTop;//我们假设是300px (2).我们的目标是回到顶部，这个时候滚动条距离顶部的距离是0. (3). 滚动条运动了多少距离。结束位置-开始位置=dis=0-300=-300px; (4). 确定总共需要运行的次数。 var count=Math.floor(1000/30); var n=0;

第四步：开定时器运行 (1)定时器每运行一次，n+1(n代表当前走的次数) (2).我们已经在上面获取了滚动条距离顶部的距离是： var scrollT=document.documentElement.scrollTop||document.body.scrollTop;//我们假设是300px (2)计算走的比例，再将比例乘以总共需要走的距离，得到当前走的距离 var a=n/count; 当前走的距离： dis*a; 还剩了多少距离：就是总的距离减去我们刚才走的距离。 cur=scrollT+dis*a; (3)设置滚动条距离顶部的距离 document.documentElement.scrollTop=document.body.scrollTop=cur; (4)如果n==count，代表路程全部走完，关闭定时器 if(n==count){ clearInterval(timer); }

第五步:处理问题 (1). 当onclick事件执行的时候，定时器执行，会触发onscroll事件，setInterval未执行完的时候，onclick不可以再次点击 (2)onscroll事件触发的时候，滚动条往上滚动的过程中，即使setInterval还未执行完，我们也可以通过鼠标滚动，让滚动条再次往下滚动

处理方法：设置开关，控制，当bSin=true的时候，可执行，当bSin=false的时候不可以执行

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>input{position: fixed;right: 0;bottom: 0;display: none;}</style><script>window.οnlοad=function(){ var oBtn=document.getElementById('btn1'); var timer=null; //bSin是一个标志位 //bSin：true---->代表底部那个按钮对象是可以使用的 //bSin：false---->代表底部那个按钮对象是不可以使用的 var bSin=false; window.οnscrοll=function(){ if(bSin){ clearInterval(timer) } console.info(1); bSin=true; var scrollT=document.documentElement.scrollTop||document.body.scrollTop; if(scrollT >0){ oBtn.style.display='block'; }else{ oBtn.style.display='none'; }; }; oBtn.οnclick=function(){ var scrollT=document.documentElement.scrollTop||document.body.scrollTop; var dis=0-scrollT; var count=Math.floor(1000/30); var n=0; timer=setInterval(function(){ bSin=false; n++; var a=n/count; var cur=scrollT+dis*a; document.documentElement.scrollTop=document.body.scrollTop=cur; if(n==count){ clearInterval(timer); } },30); } }; </script> </head> <body style='height: 3000px'> <input type="button" value="返回顶部" id='btn1'> </body> </html>