Vue.js 滚动到同一路线的页面顶部答案

【问题标题】：Vue.js scroll to top of page for same routeVue.js 滚动到同一路线的页面顶部
【发布时间】：2018-10-31 03:02:15
【问题描述】：

我可以像这样为 Vue.js 路由器设置滚动行为：

const router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'index',
            component: Main
        },
        {
            path: '/some-path',
            name: 'some-path',
            component: SomePath
        }
    ],
    scrollBehavior() {
        return {x: 0, y: 0}
    }
})

当您单击某个不是当前页面的链接时，这非常有效。当我单击已经呈现的链接时，即在页脚中，没有任何反应。 Vue Router 假设没有状态转换。在这种情况下，向上滚动的首选方式是什么？

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

你不能通过vue-router 做到这一点。但是您可以将滚动到顶部的方法添加到每个 router-link。

只需创建一个方法

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

并将其添加到链接中

<router-link @click.native="$scrollToTop">

如果您也想在页脚之外使用它，最好将其添加到 Vue 原型

Vue.prototype.$scrollToTop = () => window.scrollTo(0,0)

这不是 100% 的解决方案，但它是最简单的解决方案

【讨论】：

我在考虑类似的解决方案。不管怎么说，还是要谢谢你！ :-)
window.scrollTo(0,0);在我的 viewJs 应用程序中根本不起作用，即使在控制台中也是如此
您应该滚动可滚动组件，通常甚至不是#app，而是类似#app-content，这取决于您应用的布局。
这绝对是最好的解决方案。我想做同样的事情但动画，问题是这个总是触发，而不仅仅是当它是当前路线时。我真的希望有一个事件或回调，特别是当您单击当前路线时。
当使用组件方法时，你会省略全局方法符号'$'，只需写：<router-link @click.native="scrollToTop">

【解决方案2】：

如果浏览器支持 history.pushState，Vue Js 内置了对滚动的支持。

配置非常简单，只需要提供scrollBehavior功能，创建Vue路由器实例时如下：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // page scroll to top for all route navigations
    return { x: 0, y: 0 }
  }
})

有关 Vue 的更多选项和详细信息滚动行为 click here

【讨论】：

此解决方案不起作用。如果链接指向当前路由，则不会调用 scrollBehaviour，由 OP 指定。
对不起 Techyaura，你在这里有点过分了，但还是谢谢

【解决方案3】：

您可以根据需要使用behavior: smooth。

moveTo () {
  let to = this.moveToDown
    ? this.$refs.description.offsetTop - 60
    : 0

  window.scroll({
    top: to,
    left: 0,
    behavior: 'smooth'
  })

  this.moveToDown = !this.moveToDown
}

【讨论】：

这个应该是公认的答案，谢谢！

【解决方案4】：

我想回答这个问题是为了向那些提出滚动行为根本不起作用的问题的人添加更多信息。

我无法让上述任何解决方案发挥作用，这真的很令人沮丧。

最终为我工作的是以下内容：

const router = new Router({
    mode: 'history',
    routes: [...],
    scrollBehavior() {
        document.getElementById('app').scrollIntoView({ behavior: 'smooth' });
    }
})

我将我的 VueJs 应用安装到#app，这样我就可以确定它存在并且可供选择。

【讨论】：

这对我很有帮助，我在嵌套的 Vue 路由中使用 scrollTo(0,0) 时遇到了问题
这家伙是神亲自派来的！ ?
我也无法使用已接受的答案。这就像一个魅力。谢谢。
对于.navbar .fixed-top (#app { margin-top: 60px; } 最好使用scrollBehavior() { window.scrollTo(0,0); }
我已经尝试了所有我能找到的方法，甚至是官方的 vue 文档，这是唯一一个在所有情况下都可以运行的方法@SweetChillyPhilly，谢谢！

【解决方案5】：

使用这个不错的组件：https://www.npmjs.com/package/vue-backtotop

<back-to-top text="Back to top"></back-to-top>

【讨论】：

【解决方案6】：

扩展 Vitaly Migunov 的答案，您可以直接从路由器向窗口对象添加一个 scrollTo 方法。这样您就不需要将功能添加到每个路由器链接。

const router = new Router({
  mode: 'history',
  routes: [...],
  scrollBehavior() {
    window.scrollTo(0,0);
  }
})

【讨论】：

就像问题提到的那样，不幸的是，当路径保持不变时，不会触发滚动行为。这就是这个人遇到的具体问题。

【解决方案7】：

使用refs 滚动到某个部分

<template>
  <body>
    <div ref="section">
      // Your content section
    </div>
  </body>
</template>

export default class MyPage extends Vue {
  $refs!: {
    section: HTMLFormElement;
  };

  scrollToTop() {
    this.$refs.section.scrollTo(0, 0);
  }
}

【讨论】：

【解决方案8】：

基本上，我认为您希望滚动到页面顶部，除非指定了内部页面位置（例如 www.example.com/home#blah）。到目前为止，所有的答案都会忽略这个位置参数，而只是滚动到顶部。

scrollBehavior(to, from, savedPosition) {
    //If there is no hash parameter when we change vue, scroll to top of page
    if (!to.hash) {
      return { x: 0, y: 0 }
    }
  }

我们可以使用to.hash检查是否有位置参数，如果没有哈希位置，则只滚动到顶部。

【讨论】：

【解决方案9】：

我为此找到的最佳解决方案是：https://router.vuejs.org/guide/advanced/scroll-behavior.html

具体来说：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

【讨论】：

这将为所有 to, from, savedPosition 返回 not defined。你如何解决这个问题？
如果你不打算使用任何变量，你可以删除它们。