I want to only display the scroll to top/bottom button in the page that have vertical scroll bar. However , the button does not appear when the page contain vertical scroll bar. Is there any idea 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>
You can move hasVerticalScroll to method in parent component ad listen to scroll event:
Vue.component('scrollToTopButton', {
template: `
<div 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>
`,
data () {
return {
isVisible: false,
position: 0
}
},
methods: {
onScroll() {
this.isVisible = window.scrollY > 50
},
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'
})
},
},
})
new Vue({
el: "#demo",
vuetify: new Vuetify(),
data() {
return {
hasScroll: false
}
},
methods: {
hasVerticalScroll() {
this.hasScroll = document.body.offsetHeight > window.innerHeight;
}
}
})<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="demo" >
<v-app v-scroll="hasVerticalScroll">
<v-main>
<v-container >
<div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div>
<div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div><div>xxx</div>
<scroll-to-top-button v-if="hasScroll" ></scroll-to-top-button>
</v-container>
</v-main>
</v-app>
</div>