首页 > 代码库 > 实用的回到顶部效果

实用的回到顶部效果

  在各大网站上我们都可以看到一个回到顶部按钮,但它是怎么做的呢?

  其实很简单,我们只需要将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)    
	                         
}

   再看运行效果,完美,收工

实用的回到顶部效果