html:
<!-- flag 控制圖片顯示隱藏 -->
<!-- backTop 回頂部的方法 -->
<img v-if="flag" class="back" src="圖片url" @click="backTop">
vue實(shí)例：
// vue的兩個生命鉤子.
// window對象狐史，所有瀏覽器都支持window對象痒给。它表示瀏覽器窗口，監(jiān)聽滾動事件
mounted () {
window.addEventListener('scroll', this.scrollToTop)
},
destroyed () {
window.removeEventListener('scroll', this.scrollToTop)
},
methods: {
// 點(diǎn)擊圖片回到頂部方法骏全，加計時器是為了過渡順滑
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)
},
// 為了計算距離頂部的高度苍柏，當(dāng)高度大于120顯示回頂部圖標(biāo)，小于120則隱藏
scrollToTop () {
const that = this
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
that.scrollTop = scrollTop;
if (that.scrollTop > 120) {
that.flag = true;
} else {
that.flag = false;
}
}
}
原：https://blog.csdn.net/qq_36070288/article/details/84765139
