点击按钮回到顶部的几种方法

大部分项目都会有回到顶部的功能，话不多说，下面是具体实现的思路

大致思路就是将滚动条距离顶部的距离设置成0，如果有专门的回到顶部按钮，还要获取滚动条距离顶部的距离，然后判断是否显示。

1.获取滚动条距离顶部距离的方法

     let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
     console.log(scrollTop)

2.可以直接设置成0，但是会很生硬，没有过渡效果

        document.body.scrollTop = 0
        document.documentElement.scrollTop = 0

3.可以加个定时器，慢慢减少到顶部的距离，如果距离为0，则清除定时器

 var timer = setInterval(function () {
          let osTop = document.documentElement.scrollTop || document.body.scrollTop;
          let ispeed = Math.floor(-osTop / 5);
          document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
          this.isTop = true;
          if (osTop === 0) {
            clearInterval(timer);
          }
        }, 10)

4.也可以用a标签来实现，但是也很生硬，没啥效果

<a href="#top"> 回到顶部</a></div>

还有判断回到顶部按钮是否出现，现在做的项目还没有，以后有时间再补充吧