这篇博客介绍了如何在Vue应用中实现一个返回顶部的功能。当页面滚动超过一定距离时，显示返回顶部按钮；反之，则隐藏。文章分为三个步骤详细讲解了实现过程：首先在组件挂载时添加滚动事件监听并调用`showheader`方法，接着定义`showheader`函数判断滚动距离以控制按钮的显示与隐藏，最后实现点击返回顶部按钮时的平滑滚动效果。
实现功能：当屏幕大于多少，展示出返回头部的按钮，当屏幕小于多少就隐藏返回头部的按钮；
展示返回头部
隐藏返回头部
代码展示
//第一步
mounted() {
//获取当前的页面滚动事件，然后执行 this.showheader事件
window.addEventListener('scroll', this.showheader);
},
destroyed() {
window.removeEventListener('scroll', this.showheader);
},
//第二步
showheader: function() {
//当前屏幕等于多少执行的事件
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
this.scrollTop = scrollTop
console.log(scrollTop)
if (scrollTop > 541) {
//当屏幕大于541的时候，就显示，小于则不显示
this.show = true;
} else {
this.show = false;
}
}
//第三步
backTop: function() {
//返回头部的动画
const that = this
let timer = setInterval(() => {
let ispeed = Math.floor(-that.scrollTop / 7)
document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
if (that.scrollTop === 0) {
clearInterval(timer)
}
}, 10)
扫一扫
301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
