使用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

通过使用$vuetify对象上的goTo方法，programmatically triggering scrolling可以在您的应用程序中实现验证解决方案。

<v-btn
  class="md-5 mr-3 elevation-21"
  dark
  fab
  button
  right
  color="indigo darken-3"
  fixed
  @click="$vuetify.goTo('#topMostElement', goToOptions)
>

可以绑定选项来控制缓动的持续时间和风格：

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

此外，通过使用Vuetify的v-scroll directive在滚动窗口或目标元素时提供回调，该按钮最初可以隐藏，直到页面开始滚动。在本例中，我们检测窗口上的滚动。

<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"
>

然后捕获距页面顶部的偏移量，并使用滚动的任意行程来取消隐藏按钮。

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

Answer 3

尝试(在整页上打开代码段)

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>

​