本内容搭配Vant编写,具体配置可自行查询
<template>
<div class="backTop">
<van-button
round
type="info"
color="#c0c4cc"
plain
@click="toTop"
v-show="gotop">
<van-icon name="back-top"/>
</van-button>
</div>
</template>
<script>
export default{
data(){
gotop:false
},
method:{
handleScroll() {
let scrolltop =
document.documentElement.scrollTop || document.body.scrollTop;
scrolltop > 100 ? (this.gotop = true) : (this.gotop = false);
},
toTop() {
let top = document.documentElement.scrollTop || document.body.scrollTop;
// 实现滚动效果
const timeTop = setInterval(() => {
document.body.scrollTop =
document.documentElement.scrollTop =
top -=
50;
if (top <= 0) {
clearInterval(timeTop);
}
}, 10);
},
},
mounted() {
/*
监听滚动条
*/
window.addEventListener("scroll", this.handleScroll, true);
},
}
</script>