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

Question

我可以像这样为 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}
    }
})

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

Answer 1

您无法通过 vue-router 执行此操作，但您可以为每个 router-link.

添加滚动到顶部的方法

只需创建一个这样的方法：

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

将其添加到 link:

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

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

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

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

Answer 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

Answer 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
    }

Answer 4

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

最终对我有用的是以下内容：

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

我将我的 VueJs 应用程序安装到 #app 所以我可以确定它存在并且可供选择。

Answer 5

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

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

Answer 6

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

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

Answer 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);
      }
    }

Answer 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 检查是否有位置参数，如果没有散列位置，则只滚动到顶部。

Answer 9

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

具体来说：

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

Answer 10

这对我有用：

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  scrollBehavior() {
     document.getElementById('app').scrollIntoView({behavior:'smooth'});
  }
})

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

Vue.js scroll to top of page for same route

vue.js

vue-router