js实现页面滚动返回顶部

许多网站的右下角都有一个可以使页面返回顶部的按钮

例如这些网站：

返回顶部我们可以用锚点链接来实现，但是锚点链接它突然闪到页面顶部有点不太好看

如果页面是滚动着回到顶部的话会好看很多

那么，开始今天的正题

#前面是拆解着讲的，不想看可以直接跳过，带注释的完整版代码在后面

先搞几个盒子和一个用来添加点击事件的按钮

<div>模块1</div>
<div>模块2</div>
<div>模块3</div>
<div>模块4</div>
<div>模块5</div>
<div>模块6</div>
<div>模块7</div>
<div>模块8</div>
<div>模块9</div>
<button>返回顶部</button>

再随便搞一点样式

* {
   
    padding: 0px;
    margin: 0px;
}
div {
   
    width: 1200px;
    height: 300px;
    margin: 50px auto;
    font-size: 120px;
    line-height: 300px