首先我们要获取页面的dom元素
ref="home"
//获取整个盒子
this.$refs.home
<span class="hui" v-show="huiShow" @click="huiTop">回到顶部</span>
//挂载后 dom渲染完毕页面和内存的数据已经同步
mounted() {
console.log(this.$refs.home);
// addEventListener() 方法用于向指定元素添加事件。
this.$refs.home.addEventListener('scroll',this.handlerscroll)
},
//销毁后
destroyed(){
// removeEventListener() 方法来移除 addEventListener() 方法添加的事件。
this.$refs.home.removeEventListener('scroll',this.handlerscroll)
},
methods:{
handlerscroll() {
console.log(Math.ceil(this.$refs.home.scrollTop));
// Math.ceil向上取整
if(Math.ceil(this.$refs.home.scrollTop) >= 100) {
// 显示按钮
this.huiShow = true
} else {
// 显示按钮
this.huiShow = false
}
},
huiTop() {
this.$refs.home.scroll({
top:0,
//smooth缓慢返回到顶部
behavior:'smooth'
})
}
}