Прокрутка вверх медленно с помощью Vuetify

Question

У меня есть кнопка на моей странице, которая прокручивает страницу вверх. Это работает, но я хочу, чтобы скольжение было плавным и не мгновенным. Какой хороший способ сделать это?

Обратите внимание, что на этом сайте есть похожие вопросы, но ни один из них не использует Vuetify.

Это моя кнопка:

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

Это моя функция:

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

Answer 1

Использование параметра behavior запускает анимированную прокрутку в браузерах, которые его поддерживают.

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

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

Answer 2

try (открыть фрагмент на всю страницу)

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>