從頁面底部回到頂部+動畫效果 & 翻頁後從按鈕處回到頁面頂部

點選按鈕從頁面底部回到頁面頂部（動畫效果）

效果：

template

<div>頂部</div>
<div class="footer">底部</div>
<div class="toTop" @click="toTop()">
	回到頂部
</div>

style

body {
        height: 2000px;
    }
.toTop {
	   position: fixed;
	   bottom: 140px;
	   right: 40px;
	   transition: 3s;
}
.footer {
	   margin-top: 2200px;
}

script

methods: {
    toTop(){
      let timer = -1
      let scrollTo = document.documentElement.scrollTop || document.body.scrollTop
      if ( timer === -1 ){
          timer = setInterval(() => {
          scrollTo -= 20
          if( scrollTo <= 0 ) {
             scrollTo = 0
             window.clearInterval(timer)
             timer = -1
          }
          window.scrollTo(0,scrollTo) 
        }, 10);
      }
    }
  },

翻頁後從按鈕處回到頁面頂部

在按鈕處新增一個事件，重複以上js程式碼即可

不要動畫效果的話直接寫：

window.scrollTo(0,0)

解析

獲取當前頁面滾動條縱座標的位置：document.body.scrollTop與document.documentElement.scrollTop

獲取當前頁面滾動條橫座標的位置：document.body.scrollLeft與document.documentElement.scrollLeft

document.body.scrollTop與document.documentElement.scrollTop兩者有個特點，就是同時只會有一個值生效，這兩個值總有一個恆為0.且不同瀏覽器相容性不同
故可以寫成scrollTo = document.documentElement.scrollTop || document.body.scrollTop

setInterval(function, milliseconds)
milliseconds 週期性執行或呼叫 code/function 之間的時間間隔

setInterval() 方法可按照指定的週期（以毫秒計）來呼叫函式或計算表示式。

setInterval() 方法會不停地呼叫函式，直到 clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的引數。

setInterval(() => {
          scrollTo -= 20
          if( scrollTo <= 0 ) {
             scrollTo = 0
             window.clearInterval(timer)  // scrollTo = 0時停止計算表示式
          }
          window.scrollTo(0,scrollTo) // 頁面滾動到計算出來的位置
        }, 10);