演示
Top.vue
<template>
<div class="goTop" v-show="goTopShow" @click="goTop">
<!-- 我使用的是图，可以使用文字代替，自定义样式 -->
<img src="./assets/images/btn/top.png" alt="Top">
</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 lang="scss" scoped>
.goTop {
position: fixed;
right: 40px;
bottom: 60px;
cursor: pointer;
img{
width: 60px;
height: 60px;
}
}
</style>
使用
//引入组件
import Top from "@/components/common/Top";
//注册组件
export default {
components: {
Top,
},
}
//页面使用组件
<template>
<div>
<Top />
</div>
</template>
