Vue 在页面加载时滚动到顶部答案

【问题标题】：Vue Scroll to top on pageloadVue 在页面加载时滚动到顶部
【发布时间】：2020-07-11 06:56:09
【问题描述】：

我目前在我的portfolio website 中使用Gridsome。但是，当我在移动/平板设备上的页面底部比我要导航到的页面长时，该页面不会滚动到 Firefox 的顶部。在谷歌浏览器上运行良好。

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

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

我尝试了其他解决方案，但似乎没有任何效果。我不想为此解决方案使用任何 jquery。

【问题讨论】：

【解决方案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);

【讨论】：

两个选项都试过了。仍然无法解决 Firefox 上的问题。我在main.js 中应用了第一个，因为该页面上使用了vue-router。由于出现错误，我不得不将代码更改为router.scrollBehavior = function(to, from , savedPosition) {}，但仍然无法正常工作。
我不知道怎么做，但我删除了所有选项并添加了一些其他东西，现在它工作正常......无论如何感谢您的帮助。
@JosBroers 我在使用 Firefox 时遇到了同样的问题（即使使用 scrollBehavior），我很想知道您是如何解决的！
@Sameh 我没有修复它。我改为添加淡入淡出过渡。

【解决方案2】：

我找到了以下解决方法，它不是最好的结果，但它对我有用。将Y值设置为1或2，火狐好像0有问题。

window.scrollTo(0, 2);

【讨论】：