首页 > 代码库 > 运动-模拟返回顶部
运动-模拟返回顶部
第一步：获取底部的那个按钮对象，默认的情况下那个按钮对象是不可见的。可见的条件的是滚轮距离顶部有距离。
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="http://www.mamicode.com/返回顶部" id=‘btn1‘>
</body>
</html>
运动-模拟返回顶部