在首页添加一键返回首页顶部
效果展示图
**我处理的方式是在首页底部添加了一个组件实现返回顶部的效果
1.首先你要找一个返回的图标或图片然后使用下面的代码就可以实现
**
<template>
<div
class="back_top"
@mouseover="enterBackTop"
@mouseout="outBackTop"
ref="backTop"
:style="{ opacity: opacity }"
v-show="gotop"
@click="handleScrollTop"
>
<van-icon name="back-top" size="40px" /> <!-- 返回图标 -->
</div>
</template>
<script>
export default {
data() {
return {
opacity: ".3",
gotop: false,
scrollHeight: 300,
scrollTop: 0
};
},
methods: {
enterBackTop() {
this.opacity = ".5";
},
outBackTop() {
this.opacity = ".3";
},
handleScroll(e) {
const that = this;
const scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
that.scrollTop = scrollTop;
that.scrollTop > this.scrollHeight
? (this.gotop = true)
: (this.gotop = false);
},
handleScrollTop() {
// this.$nextTick(() => {
// this.ele.scrollIntoView({ behavior: 'smooth' });
// });
const that = this;
const timer = setInterval(() => {
const ispeed = Math.floor(-that.scrollTop / 5);
document.documentElement.scrollTop = document.body.scrollTop =
that.scrollTop + ispeed;
if (that.scrollTop === 0) {
clearInterval(timer);
}
}, 16);
}
},
mounted() {
window.addEventListener("scroll", this.handleScroll, true); // 注册滚动事件
}
};
</script>
<style lang="less" scoped>
.van-icon{
position: fixed;
bottom: 80px;
right: 30px;
}
.van-icon:hover{
opacity: 1;
}
</style>
自己新建一个组件,把代码使用到组件里在首页注册使用一下组件就ok了
如果还有不懂的,具体可以看本人的项目源码,仅供参考
项目地址:点击链接即可跳转到本人项目仓库
如果觉得这篇文章对您有一点用处的话,请不要吝啬您的小心❤❤❤