html

    <div class="totop" v-show="toTopShow" @click="toTop()">top</div>

.totop {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 25px;
  background-color: white;
  position: fixed;
  bottom: 75px;
  right: 10px;
  text-align: center;
}

data

 data() {
    return {
  toTopShow: false,srcoll: 0,}
},

監聽事件

  watch: {
    srcoll() {
      if (this.srcoll > 400) {
        this.toTopShow = true;
      } else {
        this.toTopShow = false;
      }
    },},

載入事件

 mounted() {
    window.addEventListener("scroll",this.srcollShow);
  },

methods：

 methods: {
    srcollShow() {
      this.srchttp://www.cppcns.com
 
oll =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
    },toTop() {
    http://www.cppcns.com  this.toTopSpeed = setInterval(() => {
        document.documentElement.scrollTop =
          document.documentElement.scrollTop - 20;
//通過改變數字實現動畫延遲滾動
        if (this.srcoll < 10) {
    
 
      clearInterval(this.toTopSpeed);
        }
      },1);
    },}

以上操作實現通過監聽滾動條>400後，top按鈕出現，並且點選top按鈕，慢慢回到頂部，低於400隱藏,img以此類推

到此這篇關於通過v-show實現回到頂部top效果的文章就介紹到這了,更多相關vue回到頂部top效果內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！