在vue中用js實現帶過渡的返回頂部的效果
theme: channing-cyan
-
在專案中都會有一些很長篇的文件，翻到底部再手動往上翻很麻煩，這篇文章簡單記錄一下原生返回頂部的方法，目前元件庫中都有自帶返回頂部的元件，比原生方法要方便許多。
-
html中可以放圖示、圖片等等。 ```
* 在data中將showArrow設為false是為了控制在達到一定高度的時候才會顯示，這步不寫html元素是不會出來的。
data() {
return {
showArrow: false
};
},
* 這兩個生命週期的鉤子函式就不細說了，addEventListener()用於新增一個事件處理程式，而removeEventListener()用於移除事件處理程式。它們都接受3個引數：如addEventListener("事件名" , "事件處理函式" , "布林值");第三個引數可以省略，預設為false。通過addEventListener()新增的事件處理程式只能使用removeEventListener()來移除；
mounted () {
window.addEventListener('scroll', this.scrollToTop)
},
destroyed () {
window.removeEventListener('scroll', this.scrollToTop)
},
* js方法
methods: {
// 點選箭頭回到頂部方法，加計時器是為了過渡順滑
toTop () {
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.showArrow = true
} else {
that.showArrow = false
}
}
},
* css樣式
```