js 实现回到顶部

逻辑:
      0、window.onscorll 事件
      1、当滚动条滚动距离>200时,显示回到顶部,否则不显示
      2、点击回到顶部,滚动条距离为0
 <style type="text/css">
    body {
      height: 1500px;
    }

    div {
      position: fixed;
      right: 20px;
      bottom: 20px;
      display: none;
      width: 200px;
      height: 200px;
      line-height: 200px;
      background: #ccc;
      text-align: center;
    }
  </style>

<script type="text/javascript">
    var oDiv = document.getElementsByTagName("div")[0];
    window.onscroll = function () {
      var scollTop = document.documentElement.scrollTop || document.body.scrollTop;
      console.log(scollTop);
      if (scollTop >= 200) {
        oDiv.style.display = "block";
      } else {
        oDiv.style.display = "none";
      }
    }
    oDiv.onclick = function () {
      document.documentElement.scrollTop = document.body.scrollTop = 0;
      // 注意: 这里不能写scrollTop=0,因为这样的话只是重新赋值,并不能设置滚动距离
    }
  </script>
原文地址:https://www.cnblogs.com/yunyin/p/13641180.html