当页面出现上下滚动条时,页面右下角出现回到顶部功能。
在页面上添加如下DIV(写的CSS内部样式),这个DIV功能:出现滚动条往下滑动,就显示出来,反之隐藏。点击DIV快速回到顶部。
<div
v-if="btnFlag"
class="backTop"
@click="backTop"
>
<img src="@/assets/needsAnalysis/top.png">
<p>顶部</p>
</div>
btnFlag: false,
mounted () {
window.addEventListener('scroll', this.scrollToTop)
},
destroyed () {
window.removeEventListener('scroll', this.scrollToTop)
},
// 点击图片回到顶部方法,加计时器是为了过渡顺滑
backTop () {
const that = this
const timer = setInterval(() => {
const 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
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
that.scrollTop = scrollTop
if (that.scrollTop > 60) {
that.btnFlag = true
} else {
that.btnFlag = false
}
},
链接
https://www.cnblogs.com/Charles-Yuan/p/11469290.html