监听滚动条

<!-- 距离顶部按钮 -->
    <div v-if="backTop" class="backtop" @click="handleBackTop">距离顶部</div>


export default {
  name: "Home",
  components: { NavbarSearch },
  data() {
    return {
      backTop: false,
    };
  },
  mounted() {
    this.$el.addEventListener("scroll", (event) => {
      // 获取滚动条距离顶部滚动距离
      let scrollTop = event.target.scrollTop;
      // 大于100px则显示 距离顶部；否则隐藏
      if (scrollTop > 100) {
        this.backTop = true;
      } else {
        this.backTop = false;
      }
    });
  },
  methods: {
    handleBackTop() {
      // 获取当前滚动条距离顶部的位置
      let scrollTop = this.$el.scrollTop;
      let timer = setInterval(() => {
        // 当递减距离顶部小于0的时候，停止时间循环
        if (scrollTop <= 0) {
          clearInterval(timer);
          this.$el.scrollTop = 0;
          return;
        }

        scrollTop = scrollTop - 50;
        this.$el.scrollTop = scrollTop;
      }, 8);
    },
  },