vue中實現回到頂部功能

具體效果點選這裡檢視：   家盟家政

下面直接看程式碼：（不清楚的看對應註釋）

<!-- 回頂部按鈕為一張50*50的圖片 -->
<!-- btnFlag 控制圖片顯示隱藏 -->
<!-- backTop 回頂部的方法 -->
<img v-if="btnFlag" class="go-top" src="圖片url" @click="backTop">

vue例項：

// vue的兩個生命鉤子，這裡不多解釋。
// window物件，所有瀏覽器都支援window物件。它表示瀏覽器視窗，監聽滾動事件
mounted () {
  window.addEventListener('scroll', this.scrollToTop)
},
destroyed () {
  window.removeEventListener('scroll', this.scrollToTop)
},


methods: {
  // 點選圖片回到頂部方法，加計時器是為了過渡順滑
  backTop () {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
  },

  // 為了計算距離頂部的高度，當高度大於60顯示回頂部圖示，小於60則隱藏
  scrollToTop () {
    const that = this
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    that.scrollTop = scrollTop
    if (that.scrollTop > 60) {
      that.btnFlag = true
    } else {
      that.btnFlag = false
    }
  }
}
   

 大家可以直接手機端開啟，本宣傳頁做了媒體響應，會根據視窗變化而自動適應各種尺寸螢幕，如對大家有所幫助歡迎點贊，你們的支援是我不斷分享的最大動力！

---

小程式中實現回到頂部，具體效果看（微信掃碼）：