原生 js 方法如下

const backTop = (btnId) => {
    let btn = document.getElementById(btnId);
    let d = document.documentElement;
    let b = document.body;
    window.onscroll = set;
    btn.style.display = "none";
    btn.onclick = () => {
        btn.style.display = "none";
        window.onscroll = null;
        this.timer = window.setInterval(() => {
            d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
            b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
            if (d.scrollTop + b.scrollTop == 0)
                window.clearInterval(btn.timer, (window.onscroll = set));
        }, 10);
    };
    let set = () => {
        btn.style.display = d.scrollTop + b.scrollTop > 100 ? "block" : "none";
    }
}
backTop("goTop");

vue 中使用方法

<template>
  <div> 
    <!-- 滚动的盒子 -->
    <section ref="section" v-on:scroll="handleScoll">
      <div class="markdown-body" v-html="html"></div>
    </section>
    
    <!-- 返回顶部按钮 -->
    <div id="back-top">
      <svg
        role="button"
        viewBox="0 0 1024 1024"
        xmlns="http://www.w3.org/2000/svg"
        class="back-to-top"
      >
        <path
          d="M512 0C229.517 0 0 229.517 0 512s227.752 512 512 512c282.483 0 512-227.752 512-512C1024 229.517 794.483
            0 512 0zM351.338 271.89h305.434c14.125 0 26.483 12.358 26.483 26.482s-12.358 26.483-26.483
            26.483H351.338c-14.124 0-26.483-12.358-26.483-26.483 0-15.89 12.359-26.482 26.483-26.482z
            m331.917 303.669c-12.358 12.358-33.545 12.358-45.903 0L531.42 471.393v270.124c0 14.124-12.359
            26.483-26.483 26.483s-26.483-12.359-26.483-26.483v-271.89l-105.93 104.166c-12.36 12.359-33.546 12.359-45.904
            0-12.359-12.359-12.359-31.78 0-45.903l155.365-151.835c7.062-7.062 14.124-8.827 22.952-8.827s15.89 3.53 22.952
            8.827L683.255 527.89c12.359 15.89 12.359 35.31 0 47.669z"
          fill="currentColor"
        ></path>
      </svg>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    let btn = document.getElementById("back-top");
    btn.style.display = "none";
    btn.onclick = () => {
      let boxScrollTop = this.$refs.section.scrollTop;
      btn.style.display = "none";
      this.timer = window.setInterval(() => {
        boxScrollTop = boxScrollTop - 80;
        console.log(boxScrollTop);
        this.$refs.section.scrollTop = boxScrollTop;
        if (boxScrollTop <= 0) window.clearInterval(this.timer);
      }, 10);
    };
  },
  methods: {
    handleScoll(e) {
      let boxScrollTop = this.$refs.section.scrollTop;
      let btn = document.getElementById("back-top");
      btn.style.display = boxScrollTop > 300 ? "block" : "none";
    }
  }
};
</script>
<style lang="scss" scoped>
  #back-top {
    cursor: pointer;
    position: fixed;
    bottom: 5rem;
    right: 2rem;
    width: 2rem;
    color: #3eaf7c;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    fill: currentcolor;
    &:hover {
      opacity: 0.8;
    }
  } 
</style>