最近在帮朋友做一个官网,本来想写一个固定的头部导航,但是经过设计,发现不是很美观,最后就加了一个按钮,可以返回顶部,继续跳转到我想要去的页面。
// 当页面加载完成,我们给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 / 6)
document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
// 当回到顶部后,清除定时器
if (that.scrollTop === 0) {
clearInterval(timer)
}
}, 18)
},
// 计算距离顶部的高度,当高度大于80显示回顶部图标,小于80则隐藏
scrollToTop () {
const that = this
// 在滚动事件的过程中,获取到当前的滚动条距离顶部的高度
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
that.scrollTop = scrollTop
if (that.scrollTop > 80) {
that.topFlag = true
} else {
that.topFlag = false
}
}
}