vue 返回顶部

 <div class="backTop" v-show="btnshow">
    <div class="back_box my_bluebg my_white" @click="backTop()">回到顶部</div>
  </div>

 

export default {
  data() {
    return {
      top: "",
      btnshow: false
    };
  },
  methods: {
    backTop() {
      let timer = setInterval(() => {
        let ispeed = 50;
        this.top -= ispeed;
        document.documentElement.scrollTop = document.body.scrollTop = this.top;
        if (this.top === 0) {
          clearInterval(timer);
        }
      }, 10);
    },

    // 计算距离顶部的高度，当高度大于100显示回顶部图标，小于100则隐藏
    scrollTop() {
      this.top =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (this.top > 100) {
        this.btnshow = true;
      } else {
        this.btnshow = false;
      }
    }
  },
  created() {},
  mounted() {
    window.addEventListener("scroll", this.scrollTop);
  },
  // 页面销毁前必须移除监听
  destroyed() {
    window.removeEventListener("scroll", this.scrollTop);
  }
};