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

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

vue.js

Vue.js滚动到同一路线的页面顶部,vue.js,vue-router,Vue.js,Vue Router,我可以将滚动行为设置为Vue.js路由器，如下所示： const router = new Router({ mode: 'history', routes: [ { path: '/', name: 'index', component: Main }, { path: '/some-path', name: '

我可以将滚动行为设置为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路由器假定不存在状态转换。在这种情况下，向上滚动的首选方式是什么？

您不能通过vue路由器执行此操作。但您可以将滚动到顶部的方法添加到每个路由器链接

只需创建一个方法

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

并将其添加到链接中

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

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

如果浏览器支持历史记录，Vue Js具有内置的滚动支持。pushState

很容易配置，只需在创建Vue路由器实例时提供scrollBehavior功能，如下所示：

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

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

如果需要，您可以使用

行为：平滑
moveTo () {
  let to = this.moveToDown
    ? this.$refs.description.offsetTop - 60
    : 0

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

  this.moveToDown = !this.moveToDown
}

我想回答这个问题，让更多人了解滚动行为根本不起作用的问题
我无法让上述任何解决方案发挥作用，这真的令人沮丧
最终对我起作用的是：
const router = new Router({
    mode: 'history',
    routes: [...],
    scrollBehavior() {
        document.getElementById('app').scrollIntoView();
    }
})

我将我的VueJs应用程序装载到#应用程序，以便确定它是否存在并可供选择。
使用此漂亮的组件：
扩展Vitaly Migunov的答案，您可以直接从路由器向窗口对象添加scrollTo方法。这样，您就不需要将该功能添加到每个路由器链接
const router = new Router({
  mode: 'history',
  routes: [...],
  scrollBehavior() {
    window.scrollTo(0,0);
  }
})

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


//您的内容部分
导出默认类MyPage扩展Vue{
$refs！：{
部分：HTMLFormElement；
};
scrollToTop（）{
此.$refs.section.scrollTo（0,0）；
}
}
基本上，我认为您希望滚动到页面顶部，除非指定了内部页面位置（例如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检查是否存在位置参数，然后仅在没有哈希位置时滚动到顶部。
我找到的最佳解决方案是：
具体而言：
const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

我在考虑类似的解决方案。无论如何，谢谢！：-）滚动到（0,0）；在我的viewJs应用程序中根本不起作用，即使在控制台中，你也应该滚动可滚动组件，通常不是#app
，而是类似#app content
，这取决于你的应用程序的布局。这绝对是最好的解决方案。我想做同样的事情，但动画和问题是，这一个触发所有的时间，而不仅仅是当它的当前路线。我真的希望有一个事件或回调，尤其是当您单击当前路由时。使用组件方法时，您可以省去全局方法符号“$”，只需写下：
此解决方案将不起作用。如果链接指向OP指定的当前路径，则不会调用ScrollBehavior。抱歉，Techyaura，您在这里有点越界，但无论如何，这对我真的很有帮助，我在嵌套Vue路径中使用scrollTo（0,0）

时遇到了问题。这家伙是上帝亲自派来的！我也很难使用公认的答案。这很有魅力。谢谢。对于

.navbar.fixed top

（使用

#app{margin top:60px；}

最好使用

scrollBehavior（）{window.scrollTo（0,0）；}

我已经尝试了我能找到的每一种方法，甚至是官方的vue文档，这是唯一一种在所有情况下都能运行的@SweetChillyPhilly谢谢！正如问题所提到的，当路径保持不变时，滚动行为不会触发。不幸的是，这是此人遇到的具体问题。这返回的

未定义 对于所有的to，from，savedPosition。你如何解决这个问题？如果你不打算使用任何变量，你可以删除它们。这应该是公认的答案，谢谢！
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 }
    }
  }

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