第一步：获取底部的那个按钮对象，默认的情况下那个按钮对象是不可见的。可见的条件的是滚轮距离顶部有距离。 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.onload=function(){
var oBtn=document.getElementById('btn1');
var timer=null;
//bSin是一个标志位
//bSin：true---->代表底部那个按钮对象是可以使用的
//bSin：false---->代表底部那个按钮对象是不可以使用的
var bSin=false;
window.onscroll=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.onclick=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>