Vue点击按钮回到顶部

1.在组件里进行按钮的样式设置

 <!-- 点击回到顶部 -->
   <div class="backTop" v-if="topShow" @click="backTop">
       <van-icon name="back-top" />
        <p>TOP</p>
    </div>

.backTop {
  width: 30px;
  height: 40px;
  text-align: center;
  color: #087aff;
  position: fixed;
  right: 10px;
  bottom: 130px;
  background-color: #fff;
  /deep/ .van-icon {
    font-size: 20px;
  }
  p {
    margin: 0 0;
    font-size: 12px;
  }
}

2.监听当前页面滚动位置

mounted() {
    window.addEventListener("scroll", this.scrollToTop); //监听滚动条
},
destroyed() {
    window.removeEventListener("scroll", this.scrollToTop); //移除滚动条监听
  },

3.触发滚动事件

 data() {
    return {
      topShow: false, //记录当前返回顶部标志的可视状态
      scrollTop: 0, //当前滚动位置
    };
  },


methods: {
    // 监听到的滚动的距离
    scrollToTop() {
      this.scrollTop =
        window.scrollY ||
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log(this.scrollTop);

      // 计算距离顶部的高度，当高度大于300显示回顶部图标，小于300则隐藏
      if (this.scrollTop > 300) {
        this.topShow = true;
      } else {
        this.topShow = false;
      }
    },
    // 点击回到顶部方法，加计时器是为了过渡顺滑
    backTop() {
      // console.log(1);
      let timer = setInterval(() => {
        let ispeed = Math.floor(-this.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          this.scrollTop + ispeed;
        if (this.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
      // 直接上移至顶部
      // document.documentElement.scrollTop = document.body.scrollTop = 0;
    },
}

tip:main.js中设置,路由跳转始终保持顶部显示

import router from './router'//引入路由
 
router.afterEach((to,from,next) => {
  window.scrollTo(0,0); //切换路由之后滚动条始终在最顶部
})

有个更好用的方法

    // 控制条移动到需要修改的位置
    let finScroll = (Number(inputData.page) - 1) * this.pageHeight + Number(inputData.oneY) - 80;

    // 需要控制的滚动条盒子
    let div = document.getElementsByClassName("previewContract")[0];

    div.scroll({
      left: 0,
      top: finScroll,
      behavior: "smooth"
      });