1.锚点方式

<a href="#app">top</a>

注意：a标签的方式会导致地址新增参数

2.通过点击事件将scrollTop重置为0

document.documentElement.scrollTop = 0;

不过这种回到顶部是直接回到顶部，没有平滑效果

解决方案：页面平滑滚动

凡是需要滚动的地方都能加上css样式：scroll-behavior：smooth；来提升用户滚动体验！

例如：

html, body { scroll-behavior: smooth; }

介绍scroll-behavior属性

scroll-behavior: auto|smooth|initial|inherit;

• auto：默认值，允许在滚动框内的元素间直接跳转的“滚动效果”
• smooth：允许在滚动框内的元素间平滑的“滚动效果”
• initial：将此属性设置为其默认值
• inherit：从其父元素继承此属性

window.scrollTo

这种方式其实也是通过绑定点击事件，但是window.scrollTo函数可以传入一个option，参数里可以直接设置滚动的效果

// 给回到顶部按钮绑定点击事件
			document.getElementById('backTop').onclick = () => {
				window.scrollTo({
					top: 0,
					left: 0,
					behavior: 'smooth',
				});
			};