vue js 获取滚动距离 以及 返回顶部按钮

1. 获取滚动距离 判断是否回到顶部

  data() {
    return {
      scrollNum: 0, //滚动距离
      isTop: false, //是否显示回到顶部按钮
    };
  },
  mounted() {
    window.addEventListener("scroll", () => {
      let top =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset;
      this.scrollNum = top;
      if (top >= 100) {
        this.isTop = true;
      } else {
        this.isTop = false;
      }
    });
  },

2. 回到顶部按钮 div

<!-- 回到顶部 -->
    <div
      class="goTop iconfont ml-gotop"
      :class="isTop ? 'goTopAfter' : ''" 
      @click="goTop()"
    ></div>

3. 回到顶部方法

	goTop() {
      document.documentElement.scrollTop = 0;
    },

4. 按钮样式

.goTop {
  position: fixed;
  bottom: -100px;
  right: 5%;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  z-index: 10;
  background-color: rgba(33, 81, 129, 0.5);
  transition: 0.3s ease-in-out;
  font-size: 30px;
  text-align: center;
  line-height: 60px;
  color: #ffffff;
  transition: 0.3s ease-in-out;
  cursor: pointer;
}
.goTop:hover {
  background-color: rgba(33, 81, 129, 1);
  transition: 0.3s ease-in-out;
}
.goTopAfter {
  transition: 0.3s ease-in-out;
  bottom: 100px;
}

本文地址：https://blog.csdn.net/weixin_46329969/article/details/109375255