运动-模拟返回顶部
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了运动-模拟返回顶部相关的知识，希望对你有一定的参考价值。
第一步：获取底部的那个按钮对象，默认的情况下那个按钮对象是不可见的。可见的条件的是滚轮距离顶部有距离。
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>
以上是关于运动-模拟返回顶部的主要内容，如果未能解决你的问题，请参考以下文章
iOS开发CGRectGetMidX. CGRectGetMidY.CGRectGetMinY. CGRectGetMaxY. CGRectGetMinX. CGRectGetMaxX的使用(代码片段