javascript - Vue在页面加载时滚动到顶部

Question

我目前在我的投资组合网站中使用Gridsome。但是，当我在移动/平板设备上的页面底部比我要导航到的页面长时，页面不会滚动到 Firefox 的顶部。在谷歌浏览器上它工作正常。

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

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

Answer 2

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

window.scrollTo(0, 2);