vue返回顶部
1.新建一个vue文件:GoTop.vue
<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) { //高度大于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 -= 50;
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>
.goTop {
position: fixed;
right: 40px;
bottom: 80px;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
padding: 10px;
cursor: pointer;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
background: url('../../static/images/gotop/top2.png') no-repeat center center;
}
.goTop:hover{
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
}
</style>
2.需要的页面引入
<script>
import GoTop from "../GoTop";
export default {
components: {
"v-goTop": GoTop
},
</script>