Vue.js 在 setTimeout 后滚动到新页面路由的顶部 [英] Vue.js scroll to top of new page route after setTimeout

问题描述

当滚动到新路线顶部时，我有一个页面过渡效果不佳.我想在它自动滚动到顶部之前等待 100 毫秒.以下代码根本不会滚动.有没有办法做到这一点?

I have a page transition that doesn't work nicely when the scroll to the top of a new route is instant. I'd like to wait 100ms before it automatically scrolls to the top. The following code doesn't end up scrolling at all. Is there a way to do this?

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home
        }
    ],
    scrollBehavior (to, from, savedPosition) {
        setTimeout(() => {
            return { x: 0, y: 0 }
        }, 100);
    }
})

推荐答案

现在Vue原生支持这个，使用scrollBehaviour，像这样:

This is natively supported by Vue now, use scrollBehaviour, like this:

export default new Router({
  scrollBehavior() {
    return { x: 0, y: 0 };
  },
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ],
  mode: 'history'
});

更多信息.

这篇关于Vue.js 在 setTimeout 后滚动到新页面路由的顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！