基于js实现点击按钮回到顶部

初学前端，用于记录

1. 向下滑动页面200，显示"回到顶部"按钮，否则隐藏"回到顶部"按钮
2. 点击"回到顶部"按钮，页面缓动回到0

// 封装获取页面高度的函数
function getScroll(){
	return {
		top: window.pageYoffset||
		document.documentElement.scrollTop||document.body.scrollTop,
		
		left: window.pageXoffset||document.documentElement.scrollLeft
		||document.body.scrollLeft
	}
}

// 获取按钮
var btn = document.getElementById("btn");
// 定义定时器
var timer = null;
// 定义布尔值，判断是否到达顶部
var isTop = true;

window.onload = function(){
	// 注册页面滚动事件
	window.onscroll = function(){
		// 获取当前页面滚动值
		var scrollTop = getScroll().top;
		// 页面滚动值大于200显示按钮，否则隐藏按钮
		btn.style.display = scrollTop >= 200?"block":"none";
		// 定时器滚动时,如果手动滚动,清理定时器
		if(!isTop){
			clearInterval(timer);
		}
		// isTop = false,停住在当前页面
		isTop = false;
	}
}
// 注册按钮点击事件
btn.onclick = function(){
	// 设置定时器
	timer = setInterval(function(){
		// 获取当前页面滚动值 假设现在为200
		var scrollTop = getScroll().top;
		// 设置速度差 speed = -200 / 6;
		var speed = Math.floor( -scrolltop / 6);
		// 页面滚动值 = 200+(-200/6);
		document.body.scrollTop=document.documentElement.scrollTop=scrollTop+speed;
		// 阻止滚动事件清理定时器
		isTop = true;
		// 页面滚动值 = 0 清理定时器
		if(scrollTop == 0){
			clearInterval(timer);
		}
	},20);	
}