1.在組件里進(jìn)行按鈕的樣式設(shè)置

 <!-- 點擊回到頂部 -->
   <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.監(jiān)聽當(dāng)前頁面滾動位置

mounted() {
    window.addEventListener("scroll", this.scrollToTop); //監(jiān)聽滾動條
},
destroyed() {
    window.removeEventListener("scroll", this.scrollToTop); //移除滾動條監(jiān)聽
  },

3.觸發(fā)滾動事件

 data() {
    return {
      topShow: false, //記錄當(dāng)前返回頂部標(biāo)志的可視狀態(tài)
      scrollTop: 0, //當(dāng)前滾動位置
    };
  },


methods: {
    // 監(jiān)聽到的滾動的距離
    scrollToTop() {
      this.scrollTop =
        window.scrollY ||
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // console.log(this.scrollTop);

      // 計算距離頂部的高度，當(dāng)高度大于300顯示回頂部圖標(biāo)，小于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中設(shè)置,路由跳轉(zhuǎn)始終保持頂部顯示

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"
      });