To implement a solution in Vuetify, you can trigger scrolling programmatically within your application using the goTo method accessible through the $vuetify object.
<v-btn
class="md-5 mr-3 elevation-21"
dark
fab
button
right
color="indigo darken-3"
fixed
@click="$vuetify.goTo('#topMostElement', goToOptions)
>
You can customize the scrolling behavior by binding options to adjust duration and easing style:
data: () => {
return {
goToOptions: {
duration: 10000,
offset: 0,
easing: 'easeInOutCubic',
},
};
},
In addition, you can hide the button initially until the page begins scrolling by utilizing Vuetify's v-scroll directive for handling scroll events on the window or target element. In this case, we are detecting scroll on the window.
<v-btn
class="md-5 mr-3 elevation-21"
dark
fab
button
right
color="indigo darken-3"
fixed
@click="$vuetify.goTo('#topMostElement', goToOptions)
v-scroll="onScroll"
v-show="showGoToTop"
>
This approach involves tracking the distance from the top of the page and revealing the button after a certain amount of scroll has been completed.
data: () => {
return {
offsetTop:0,
goToOptions: {
duration: 10000,
offset: 0,
easing: 'easeInOutCubic',
},
};
},
computed:{
showGoToTop () {
return this.offsetTop > 200;
},
},
methods: {
onScroll (event) {
this.offsetTop = event.target.scrollingElement.scrollTop;
},
},