Vue滚动到页面加载顶部

Question

我目前在Gridsome中使用portfolio website。但是，当我位于移动/平板电脑设备的页面底部，而该页面底部的长度比我要导航的页面更长时，该页面不会滚动到Firefox的顶部。在Google Chrome上运行正常。

我正在使用以下代码滚动到页面顶部：

window.onbeforeunload = function () {
    window.scrollTo(0, 0);
}

我尝试了其他解决方案，但似乎无济于事。我不想为此解决方案使用任何jquery。

Answer 1

按如下所示更改您的router配置，

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

这将在每次route更改时滚动到顶部。

如果您不使用vue-router，则将以下代码添加到组件的mounted()挂钩中。

setTimeout(() => {
  document.body.scrollTop = document.documentElement.scrollTop = 0;
}, 500);