使用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);
           }
        }

- seyet

---

这是你必须使用 JavaScript 完成的事情，与 Vuetify 无关，所以这个问题并不特定于 Vuetify。 - Derek Pollard

可能是使用JavaScript/jQuery滚动到页面顶部的重复问题？ - Derek Pollard

Answer 1

使用behavior选项会在支持此功能的浏览器中触发动画滚动。

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

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollTo

- RwwL

---

这不是 OP 特别要求的 Vuetify 解决方案。 - Chris Keith

Answer 2

通过在应用程序中使用$vuetify对象上找到的goTo方法，可以通过编程触发滚动来实现Vuetify解决方案。

<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 指令来提供回调函数，以便在页面开始滚动之前将按钮隐藏。在此示例中，我们检测窗口滚动。请注意保留HTML标签。

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

- Chris Keith

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>

- Kamil Kiełczewski