HTML 代码

<div>
  <button onclick="returnTop()" id="btnTop" title="返回顶部"><img src="{__IMG__}/backTop.png"></button>
</div>

JS 代码

<script>
  // 当网页向下滑动 30px 出现"返回顶部" 按钮
  window.onscroll = function() {
    scrollFunction()
  };
  function scrollFunction() {
    console.log(121);
    if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 20) {
      document.getElementById("btnTop").style.display = "block";
    } else {
      document.getElementById("btnTop").style.display = "none";
    }
  }
  // 点击按钮，返回顶部
  function returnTop() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
  }
</script>

CSS 代码

/***************** 返回顶部 start *****************/
#btnTop {
    display: none;
    position: fixed;
    bottom: 40px;
    right: calc(50% - 670px);
    z-index: 99;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 2px;
}
#btnTop:hover {
    background-color: #9F9F9F;
    opacity: 0.5;
}
/***************** 返回顶部 end *****************/