父组件上的使用
<div class="main" ref="main">
<!--直接传入有滚动条的组件的ref,如果正常用则不用传参数-->
<backTop parent="main" />
</div>
子组件封装
<template>
<div class="back_top" @click="backTop" v-if="btnFlag">
<i>返回顶部</i>
</div>
</template>
<script>
export default {
props: ["parent"],
data() {
return {
btnFlag: false,
timer: null,
scrollTop: 0,
}
},
methods: {
backTop() {
const that = this
this.timer = setInterval(() => {
let ispeed = Math.floor(-that.scrollTop / 5)
if(this.parent){
this.$parent.$refs[that.parent].scrollTop = document.body.scrollTop = that.scrollTop + ispeed
}else{
document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
}
if (that.scrollTop === 0) {
clearInterval(this.timer)
}
}, 16)
},
scrollToTop() {
const that = this
let scrollTop = "";
if(this.parent){
scrollTop = this.$parent.$refs[that.parent].scrollTop
}else{
scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
}
that.scrollTop = scrollTop
if (that.scrollTop > 60) {
that.btnFlag = true
} else {
that.btnFlag = false
}
}
},
mounted() {
window.addEventListener('scroll', this.scrollToTop, true)
},
destroyed() {
window.removeEventListener('scroll', this.scrollToTop,true)
},
}
</script>
<style lang="scss" scoped>
.back_top {
z-index: 9999;
position: absolute;
bottom: 120px;
right: 30px;
background-color: rgba(0, 0, 0, .6);
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
transition: all .2s ease-in-out;
line-height: 50px;
opacity: 0.8;
i {
color: #fff;
font-size: 24px;
padding: 8px 12px;
font-weight: bold;
}
}
.back_top:hover {
opacity: 1;
background-color: rgba(0, 0, 0, .7);
}
</style>