实用的回到顶部效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实用的回到顶部效果相关的知识，希望对你有一定的参考价值。
在各大网站上我们都可以看到一个回到顶部按钮，但它是怎么做的呢？
其实很简单,我们只需要将scrollTop的值置为0即可。但为了让回滚的效果更舒服，我们需要利用一点运动学的知识让页面滚动的速度由快变慢，例如speed = scrollTop/8。
先给出布局代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> #btn1{ position: fixed; bottom: 0; right: 0; } </style> </head> <body> 1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
2<br />
3<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br />
2<br />
3<br />
4<br />
1<br /> <input id="btn1" type="button" value="回到顶部" /> </body> </html>
我们先获取到初始的scrollTop,再利用定时器让它动起来
var oBtn = document.getElementById(‘btn1‘);
oBtn.onclick = function(){
setInterval(function(){
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var speed = Math.floor(-scrollTop/8);
document.documentElement.scrollTop = document.body.scrollTop = scrollTop+speed;
},30)
}
但我们马上会发现问题,当页面滚回顶部时我们再下拉滚动条页面也会继续回滚,这是因为我们没有关闭定时器。因此我们把代码给成这样:
var oBtn = document.getElementById(‘btn1‘);
var timer = null;
oBtn.onclick = function(){
timer = setInterval(function(){
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var speed = Math.floor(-scrollTop/8);
//当滚回顶部时关闭定时器
if(scrollTop == 0){
clearInterval(timer);
}
document.documentElement.scrollTop = document.body.scrollTop = scrollTop+speed;
},30)
}
貌似滚动就正常了,当页面滚回顶部时我们再下拉页面它也不会使劲儿往回滚。但是,真的有这么简单吗?too young!!!当页面还未滚回顶部时我们下拉页面你会发现页面会继续往上回滚。这貌似和我们在其他网站遇到的不一样啊？？？吓得我赶快打开淘宝试了一下,回滚的过程中如果我们拉了滚动条页面不会继续回滚。这如何来做呢?很简单,我们只要在用户拉滚动条时让代码控制的滚动停止即可。因此，我们得添加一个标志iSys来区分是谁在拉滚动条。此外我们还要借助页面的onscroll事件来监听页面的滚动，每次滚动都判断iSys是否为true,若不为true则是用户拉动的
var oBtn = document.getElementById(‘btn1‘);
var timer = null;
var iSys = true; //系统拉动滚动条的标志
window.onscroll = function(){
if(!iSys){
clearInterval(timer);
}
iSys = false;
}
oBtn.onclick = function(){
timer = setInterval(function(){
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var speed = Math.floor(-scrollTop/8);
if(scrollTop == 0){
clearInterval(timer);
}
iSys = true;
document.documentElement.scrollTop = document.body.scrollTop = scrollTop+speed;
},30)
}
再看运行效果,完美，收工
以上是关于实用的回到顶部效果的主要内容，如果未能解决你的问题，请参考以下文章