adds a BackToTop component of the return button to the home page and listens to the scrollTop, in mounted (). If the scrollTop is greater than 0, the component is displayed, otherwise hidden. The
backToTop code is as follows:
<template>
<span
tabindex="0"
class="iconfont"
title=""
@click="handleToTop"
@blur="BlurOrScroll"
ref="toTop"
></span>
</template>
<script>
export default {
name: "BackToTop",
data() {
return {
isToTop: false, //
isStop: false, //
scrollTimer: null,
showTimer: null
}
},
methods: {
//
BlurOrScroll() {
if(this.isToTop) {
this.isStop = true;
}
},
//
handleToTop() {
this.isToTop = true;
let scrollDist = 0;
let speed = 0;
this.scrollTimer = setInterval(() => {
scrollDist = document.documentElement.scrollTop || document.body.scrollTop;
speed = Math.floor(-scrollDist/6);
if(scrollDist !== 0 && !this.isStop) {
scrollDist = scrollDist + speed >= 0 ? scrollDist + speed : 0;
document.documentElement.scrollTop = document.body.scrollTop = scrollDist;
} else {
clearInterval(this.scrollTimer);
}
},20);
},
//
showOrHide() {
if(this.showTimer) {
this.showTimer = null;
}
this.showTimer = setInterval(() => {
let windowH = document.documentElement.clientHeight || document.body.clientHeight;
if(document.documentElement.scrollTop || document.body.scrollTop >= windowH) {
this.$refs.toTop.style.display = "block";
} else {
this.$refs.toTop.style.display = "none";
}
},30);
}
},
watch: {
isStop() {
clearInterval(this.scrollTimer);
this.isStop = false;
}
},
mounted() {
window.addEventListener("scroll",this.showOrHide,true);
}
}
</script>
<style lang="stylus" scoped>
.iconfont
display none
position fixed
right .5rem
bottom 1rem
height .6rem
width .6rem
font-size .8rem
cursor pointer
outline none
</style>
functions normally on the home page, but BackToTop keeps reporting errors after switching pages. The screenshot is as follows:
there is no BackToTop component added to another page, so why did you report an error? Solve