詳解原生JS回到頂部

<div class="container">
	<p>你好哇</p>
	...
</div>
<div id="top">回到頂部</div>

.container{
	border: 1px solid black;
}
#top{	
	position: fixed;
	padding: 10px;
	width: 20px;
	border: 1px solid black;
	box-shadow: 0 0 2px #333;
	right: 20px;
	bottom: 20px;
}
#top:hover{
	cursor: pointer;
}

//創(chuàng)建變量
var scroll_Top = document.getElementById('top');
 
//用最常用的scrollTop屬性實現(xiàn)
var timer = null;
function scrollTop(){
	// 取消一個通過調(diào)用requestAnimationFrame()方法添加到計劃中的動畫幀請求.
	cancelAnimationFrame(timer);
	/* requestAnimationFrame 會把每一幀中的所有DOM操作集中起來，
	在一次重繪或回流中就完成，并且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率
	一般來說，這個頻率為每秒60幀。 */
	timer = requestAnimationFrame(function sTop(){
		var top = document.body.scrollTop || document.documentElement.scrollTop;
		if(top > 0){
      //使用定時器，將scrollTop的值每次減少20（自行設(shè)置），直到減少到0，則滾動完畢
			document.body.scrollTop = document.documentElement.scrollTop = top - 20;
			timer = requestAnimationFrame(sTop);
		}else{
			cancelAnimationFrame(timer);
		} 
	});
}
scroll_Top.addEventListener('click', scrollTop, false);