<!-- 距离顶部按钮 -->
<div v-if="backTop" class="backtop" @click="handleBackTop">距离顶部</div>
export default {
name: "Home",
components: { NavbarSearch },
data() {
return {
backTop: false,
};
},
mounted() {
this.$el.addEventListener("scroll", (event) => {
// 获取滚动条距离顶部滚动距离
let scrollTop = event.target.scrollTop;
// 大于100px则显示 距离顶部;否则隐藏
if (scrollTop > 100) {
this.backTop = true;
} else {
this.backTop = false;
}
});
},
methods: {
handleBackTop() {
// 获取当前滚动条距离顶部的位置
let scrollTop = this.$el.scrollTop;
let timer = setInterval(() => {
// 当递减距离顶部小于0的时候,停止时间循环
if (scrollTop <= 0) {
clearInterval(timer);
this.$el.scrollTop = 0;
return;
}
scrollTop = scrollTop - 50;
this.$el.scrollTop = scrollTop;
}, 8);
},
},
02-09
215
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
10-18
5342
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
09-15
210
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
11-02
481
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)