js实现点击回到顶部

html 代码

<div>
  <a class = "back" />
  <p>回到顶部</p>
    ...
  <p>回到顶部</p>
</div>

js 代码

<script>
    let back = document.querySelector('.back')
    let dis
    window.onscroll = function() {
      dis = document.documentElement.scrollTop || document.body.scrollTop
      if(dis >= 500) {
        back.style.opacity = '1'
      } else {
        back.style.opacity = '0'
      }
    }
    let timer = null 
    back.onclick = function() {
      // 防止连续几次点击
      clearInterval(timer)

      if(dis > 0) {
        timer = setInterval(function() {
          var speed = (0 - dis)/7
          speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
          dis += speed
          document.documentElement.scrollTop = dis
          if(dis <= 0) {
            clearInterval(timer)
          }
        }, 30)
      }
    }
  </script>