直接复制直接粘贴
mounted() {
window.addEventListener('scroll', this.handleScroll); // 监听滚动的高度
},
methods: {
// 监控页面滚动高度
handleScroll() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 200) {
this.topShow = true; // 滚动高度大于200时，显示返回顶部按钮
} else if (scrollTop < 200) {
this.topShow = false; // 滚动高度小于200时，隐藏返回顶部按钮 }
},
// 点击按钮，返回顶部
goTop() {
// 监听滚动条距离顶部的高度
let top = document.documentElement.scrollTop || document.body.scrollTop;
// 实现过度滚动效果
const timeTop = setInterval(() => {
document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
if (top <= 0) { clearInterval(timeTop); } }, 10);
}
}
最后的最后附上标签 图片地址你要换换，不然要报错
<img v-show="topShow" @click="goTop" src="/static/image/About33/topfanhui.png" class="myBtn"/>
最后的最后在送你一个class样式：
.myBtn {
/* display: none; */
position: fixed;
bottom: 80px;
right: 30px;
z-index: 99999;
cursor: pointer;
}
对了 data中别忘了 加上 topShow：false；
