<template>
<div class="main">
<div class="content">灰色部分是内容部分</div>
<div class="red">红色部分是内容部分</div>
<div class="scollTop" id="imgscoll" v-show="isShowimg === true">
<img src="@/assets/[email protected]" alt @click="goTop">
</div>
</div>
</template>
<script>
export default {
data(){
return{
isShowimg: false,
}
},
mounted(){
window.addEventListener('scroll', this.handleScroll)
},
destroyed() {
document.removeEventListener('scroll', this.handleScroll)
document.body.scrollTop = document.documentElement.scrollTop =
},
methods:{
goTop() {
// 回到顶部
document.body.scrollTop = document.documentElement.scrollTop =
this.isShowimg = false
},
handleScroll(e) {
// 滚动操作监听
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
// console.log(scrollTop)
let offsetTop =
try {
offsetTop = document.querySelector('.main').offsetTop
} catch (e) {
offsetTop =
}
if (scrollTop > offsetTop) {
// this.searchBarFixed = true
// this.scrollStatus = {
// display: 'block',
// background: '#fff',
// h: this.statusBarHeight.h
// }
if (scrollTop > ) {
this.isShowimg = true
} else {
this.isShowimg = false
}
} else {
// this.searchBarFixed = false
this.isShowimg = false
// this.scrollStatus = {
// display: 'none',
// background: 'transparent',
// h: 0
// }
}
}
}
}
</script>
<style>
*{
margin:;padding:;
}
.main{
width: %;
}
.content{
width: %;
height:60rem;
background: #eee;
}
.red{
height:30rem;
background: #f00;
}
.scollTop {
position: fixed;
bottom: 15rem;
right: 3rem;
}
.scollTop img{
width: 5rem;
height: 5rem;
}
</style>
注意图片需要自行进行引入