JS实现回到顶部效果（带动画）

问题

开发的页面内容较多，页面整体较长，需要一个直接回到顶部的按钮，方便用户一键回到顶部。

解决方法

• 基本原理：
  1. 通过设置 document.body.scrollTop 来设置页面的滚动位置
  2. 设置初始速度 speed ，并在每一轮循环中让 speed 缩小，每一轮页面滚动距离设为 speed ，直到高度为 0，给人一种由快到慢的感觉。
• 回到顶部效果代码

// 带动画
public scrollTop(): void {
	let timer = setInterval(() => {
		// 获取当前滚动高度
		const top = document.body.scrollTop || document.documentElement.scrollTop;
		// 设置滚动速度
		const speed = top / 4;
		if(document.body.scrollTop !== 0) {
			document.body.scrollTop -= speed;
		} else {
			document.documentElement.scrollTop -= speed;
		}
		if(top === 0) {
			clearInterval(timer)
		}
	}, 16) // 设置触发频率，数值越小动画越流畅，但是事件触发次数越多
}