vue监听滚动事件,当移动到某个按钮之后(即按钮消失在屏幕之内),底部出现悬浮框
mounted() {
window.addEventListener('scroll', this.handleScroll, true); //监听滚动条
},
updated() {
this.btnTop = document.querySelector('#test').offsetTop; //监听‘测试’按钮
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll);
},
methods:{
//滚动事件
handleScroll() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop > this.btnTop) {
console.log('出现悬浮框');
} else {
}
},
}
点击按钮,定位到某个位置
go(){
var top=document.getElementsByClassName('kefu')[0].offsetTop;
window.scrollTo(0, top );
}
或者利用锚点
<a href="#kefu">点我联系客服</a>
<a name="kefu">客服</a>