详解原生JS回到顶部

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

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

//创建变量
var scroll_Top = document.getElementById('');
 
//用最常用的scrollTop属性实现
var timer = null;
function scrollTop(){
	// 取消一个通过调用requestAnimationFrame()方法添加到计划中的动画帧请求.
	cancelAnimationFrame(timer);
	/ requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，
	在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
	，这个频率为每秒60帧。 /
	timer = requestAnimationFrame(function sTop(){
		var  = document.body.scrollTop || document.documentElement.scrollTop;
		if( > 0){
      //使用定时器，将scrollTop的值每次减少20（自行设置），直到减少到0，则滚动完毕
			document.body.scrollTop = document.documentElement.scrollTop =  - 20;
			timer = requestAnimationFrame(sTop);
		}else{
			cancelAnimationFrame(timer);
		} 
	});
}
scroll_Top.addEventListener('click', scrollTop, false);