第一步
直接封装成一个基础组件,代码如下直接用即可:
<template>
<div id="goTop">
<div class="icons" v-show="visiable" @click="handleScrollTop">
<i class="icons-top"></i>
</div>
</div>
</template>
<script>
export default {
name: "goTop",
data() {
return {
scrollTop: null, //初始化scrollTop
visiable: false, //默认不显示
}
},
methods: {
handleScroll() {
this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
if (this.scrollTop > 500) {
this.visiable = true
} else {
this.visiable = false
}
},
handleScrollTop() {
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.visiable = false;
}
})
}
},
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll)
}
}
</script>
<style scoped>
.icons {
position: fixed;
right: .40rem;
bottom: 1rem;
width: .80rem;
height: .80rem;
border-radius: 50%;
background: rgba(0, 0, 0, .65);
}
.icons:hover {
background: rgba(0, 0, 0, .85);
}
.icons-top {
display: block;
width: .80rem;
height: .80rem;
background-size: .40rem;
background-repeat: no-repeat;
background-position: center center;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABaUlEQVRYR+2W7U3DQBBE31QAJaQDUkJSAXQA6QAqACqADggVBCoAKoAOCBWEDgatZEcHyeX8AYqQvD/P59t3s7tjiz2H9pyfAWBQ4H8rYPtQ0mefSeqlgO0HYCVp1hWiM4DtOXACHADzrhCdAGxfAZdAffM74ELSbVslWgPYPgMi4UxSqMC2taYgrQCSRNeSQoV1VCU5BaaSnn8dwPYYeAIeJYUKG1FBHFcQb00gGimQJH+RFI2XDdtx+6OmEEWAmHXgHfgAJqW5r/YHhCuInT6xE6A6LGSPfcXktSzVe1GCVQmiBBCHjICxpGWTmiYQ0TOhxKukae7dLEBiNHHzRg31M0nVOwGxyBnVVoCuI5WZjGjaRc4tNwBsnwM3qdG0kT4DsWFe9b5vAH0crQSZu9gawHYt1X3OaEpJSs+3lTYFiGZZ/lXyZDri+zGSNIm1FKD3z0VJgdQnakMrOmHTQ7vuGwAGBQYFvgCufKAhUkYyWwAAAABJRU5ErkJggg==");
}
</style>
第二步
在需要使用的文件中注册并使用,举例在home.vue中使用的步骤
<template>
<div>
//使用组件
<scroll-top />
</div>
</template>
<script>
//引入组件
import ScrollTop from '../components/HelloWorld'
export default {
//注册组件
components: {
ScrollTop
}
}
</script>
需要注意的是,高度必须要大于判断条件的高度才能显示和隐藏,代码中设置的500px,可自行修改