时间戳

首页 > 解决方案 > Vue在页面加载时滚动到顶部

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

问题描述

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

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

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

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

标签： javascriptvue.jsonbeforeunloadgridsomejs-scrollto

解决方案

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

推荐阅读