常用功能返回顶部

<style>
  .BackTop {
    position: fixed;
    z-index: 8;
    right: 1rem;
    bottom: 4rem;
    background: rgba(0, 0, 0, .8);
    width: 2.8rem;
    height: 2.8rem;
    text-align: center;
    color: #eee;
    transition: 200ms;
    border-radius: 0.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
  }
  .show {
    opacity: 1;
    pointer-events: auto;
  }
  .BackTop:hover {
    background: #00c9ff;
    color: white;
  }
</style>
<section> 
  <a id="backtop" class="BackTop show" onclick="goTop()"> 
    <svg t="1657595916232" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2859" width="24" height="24"><path d="M854.016 739.328l-313.344-309.248-313.344 309.248q-14.336 14.336-32.768 21.504t-37.376 7.168-36.864-7.168-32.256-21.504q-29.696-28.672-29.696-68.608t29.696-68.608l376.832-373.76q14.336-14.336 34.304-22.528t40.448-9.216 39.424 5.12 31.232 20.48l382.976 379.904q28.672 28.672 28.672 68.608t-28.672 68.608q-14.336 14.336-32.768 21.504t-37.376 7.168-36.864-7.168-32.256-21.504z" p-id="2860" fill="#ffffff"></path></svg>
  </a>
</section>

<script>
  
  function setScrollTop () {
    const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    if (scrollTop > 200) {
      $('#backtop').addClass('show');
    } else {
      $('#backtop').removeClass('show');
    };
  };

  let backTopTimer  = null;
  function goTop () {
    cancelAnimationFrame(backTopTimer);
    backTopTimer = requestAnimationFrame(function fn() {
      var oTop = document.body.scrollTop || document.documentElement.scrollTop;
      if(oTop > 0) {
        document.body.scrollTop = document.documentElement.scrollTop = oTop - 100;
        backTopTimer = requestAnimationFrame(fn);
      } else {
        cancelAnimationFrame(backTopTimer);
      }    
    });
  };
  window.addEventListener('scroll', setScrollTop);
</script>

今天比较忙，就分享一个常用功能“返回顶部”，相信大家都遇到过这个需求。废话不多，直接看上面的示例代码，希望能帮到你。