1.返回顶部
<div ref='page'></div>
...
...
<p class="top" @click="topage">返回顶部<img src="../../assets/activity/hwBrand/2.png"></p>
topage(){
this.$refs.page.scrollIntoView({behavior: 'smooth', block: 'start'})
},
2.滚动到固定的地方置顶
<div class='page-all' :class="sideBarVisible==true?'fixedPage':''" ref='pageBody'>
<p>精品商标展示</p>
</div>
<div ref='containerBody'></div>
data(){
return {
sideBarVisible:false,
}
},
created() {
window.addEventListener('scroll', this.handleScroll,true);
},
methods:{
handleScroll() {
if(this.$refs.pageBody && this.$refs.containerBody){
this.sideBarVisible = this.$refs.pageBody.getBoundingClientRect().top + 60 >= this.$refs.containerBody.getBoundingClientRect().top
if(this.sideBarVisible) this.sideBarVisible = this.$refs.pageBody.getBoundingClientRect().top <= 0
}else{
this.sideBarVisible = false
}
},
}