Presently, I am focusing on implementing scroll to top button functionality.
The button appears when the content is scrolled to the bottom. My goal is to store the last position when the scroll to top button is clicked so that the user can return to that position when clicking the scroll to bottom button.
Do you have any suggestions for a more effective way to retrieve the current scroll position?
ScrollToTopBottom.vue
<template>
<div v-if="showScroll" v-scroll="onScroll">
<v-btn v-if = "!isVisible"
fab fixed bottom right color="primary" @click="toBottom">
<v-icon>mdi-arrow-down-bold-box-outline</v-icon>
</v-btn>
<v-btn v-else
fab fixed bottom right color="primary" @click="toTop">
<v-icon>mdi-arrow-up-bold-box-outline</v-icon>
</v-btn>
</div>
</template>
<script>
export default{
data () {
return {
isVisible: false,
position: 0,
hasVScroll: false,
}
},
methods: {
onScroll () {
this.isVisible = window.scrollY > 500
},
toTop () {
this.position = window.scrollY
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
})
},
toBottom(){
let pos = this.position > 0 ? this.position : document.body.scrollHeight
window.scrollTo({
top: pos,
behavior: 'smooth'
})
},
showScroll(){
this.hasVScroll = document.body.scrollHeight > document.body.clientHeight;
}
}
}
</script>
</script>