首页 > 代码库 > 实用的回到顶部效果
实用的回到顶部效果
在各大网站上我们都可以看到一个回到顶部按钮，但它是怎么做的呢？
其实很简单,我们只需要将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="http://www.mamicode.com/回到顶部" />
</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)
}
再看运行效果,完美，收工
实用的回到顶部效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。