基於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);	
}