How can I make the scroll to top/bottom button only show up on pages with a vertical scrollbar? Currently, the button is not appearing when the page contains a vertical scrollbar. Any suggestions on how to implement this feature?
ScrollToTopBottom.vue
<template>
<div v-if= "hasVerticalScroll" 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,
}
},
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'
})
},
},
computed: {
hasVerticalScroll(){
console.log('offsetHeight',document.body.offsetHeight);
console.log('windowinner',window.innerHeight);
return document.body.offsetHeight > window.innerHeight;
}
}
}
</script>