vue实现页面返回顶部功能
注:记自己在项目中关于回到顶部遇到的问题
问题:
vue监听滚动条window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop一直为0
原因:
页面中的一个div定义了overflow-y:auto,而页面滚动一直滚动的时这个div window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop当然一直为0,
解决办法:
将overflow-y:auto去掉或改为overflow-y:visible
<template>
<div id="goTop">
<div class="goTop" v-show="goTopShow" @click="goTop">
回到顶部
</div>
</div>
</template>
<script>
export default {
name: "goTop",
data() {
return {
scrollTop: "",
goTopShow: false
};
},
watch: {
scrollTop(val) {
if (this.scrollTop > 500) {
this.goTopShow = true;
} else {
this.goTopShow = false;
}
}
},
methods: {
handleScroll() {
this.scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
if (this.scrollTop > 500) {
this.goTopShow = true;
}
},
goTop() {
let timer = null,_that = this;
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn() {
if (_that.scrollTop > 0) {
_that.scrollTop -= 250;
document.body.scrollTop = document.documentElement.scrollTop =
_that.scrollTop;
timer = requestAnimationFrame(fn);
} else {
cancelAnimationFrame(timer);
_that.goTopShow = false;
}
});
}
},
mounted() {
window.addEventListener("scroll", this.handleScroll);
},
destroyed() {
window.removeEventListener("scroll", this.handleScroll);
}
};
</script>
<style scoped lang="less">
.goTop {
position: fixed;
right: 20px;
bottom: 160px;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
padding: 10px;
cursor: pointer;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
}
</style>