I have a button on my page that scrolls back to top of the page. It works but I want the sliding to be smooth and not instantly. What's a good way to do it?

Please note there are similar questions on this site but neither of them use Vuetify.

This is my button:

<v-btn
  class="md-5 mr-3 elevation-21"
  dark
  fab
  button
  right
  color="indigo darken-3"
  fixed
  @click="top"
>

This is my function:

methods:{
      top(){
             window.scrollTo(0,0);
           }
        }

I have a button on my page that scrolls back to top of the page. It works but I want the sliding to be smooth and not instantly. What's a good way to do it?

Please note there are similar questions on this site but neither of them use Vuetify.

This is my button:

<v-btn
  class="md-5 mr-3 elevation-21"
  dark
  fab
  button
  right
  color="indigo darken-3"
  fixed
  @click="top"
>

This is my function:

methods:{
      top(){
             window.scrollTo(0,0);
           }
        }

• javascript
• vue.js
• scroll
• vuetify.js

• this is something you're going to have to do with javascript, not vuetify, so this question isn't really unique to vuetify – Derek Pollard Commented Apr 1, 2019 at 20:27
• 1 Possible duplicate of Scroll to the top of the page using JavaScript/jQuery? – Derek Pollard Commented Apr 1, 2019 at 20:28

3 Answers 3

Using the behavior option triggers an animated scroll in browsers that support it.

window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'smooth'
});

https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

try (open snippet on full-page)

html {
  scroll-behavior: smooth;
}

function scrollme(selector) {
  console.log('xx');
  document.querySelector(selector).scrollIntoView();
  
}

html {
  scroll-behavior: smooth;
}

.d { width: 100px; height: 1000px; background: #eee; }

.d:nth-child(odd) {background: #ddd; height: 100px; }

<div class="d start"></div>
<button onclick="scrollme('.end')">scroll</button>
<div class="d"></div>
<div class="d"></div>
<div class="d"></div>
<button onclick="scrollme('.start')">scroll</button>
<div class="d end"></div>

A Vuetify solution can be achieved by programmatically triggering scrolling in your application by using the goTo method found on 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)
>

Options can be bound to control duration and style of easing:

data: () => {
  return {
    goToOptions: {
      duration: 10000,
      offset: 0,
      easing: 'easeInOutCubic',
    },
  };
},

Additionally, the button can initially be hidden until the page has begun to scroll by using Vuetify's v-scroll directive to provide callbacks when the window or target element is scrolled. In this instance we're 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"
>

And then capturing the offset from the top of the page and using an arbitrary travel of scroll to unhide the button.

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;
  },
},