Vue页面加载时滚动到顶部

Question

我目前在我的作品集网站中使用Gridsome。但是当我在移动设备上浏览长于当前页面的页面底部时，在Firefox浏览器中页面不会滚动到顶部。在Google Chrome浏览器中，它可以正常工作。

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

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

我已经尝试了其他解决方案，但似乎没有什么作用。我不想在这个解决方案中使用任何jquery。

- Sir_Red_DAB

---

你正在使用 vue-router 吗？如果是的话，你可以利用 滚动行为。 - Ohgodwhy

你确定你的函数被触发了吗？ :) - Adam Orłowski

我有另外两个函数，使用JavaScript进行滚动。一个是滚动到指定的ID位置，另一个是滚动到页面顶部。这两个函数都会在点击锚点时触发。 - Sir_Red_DAB

在HTML标签的事件列表中，我可以看到这个函数。而且它没有抛出任何错误。 - Sir_Red_DAB

@Ohgodwhy 我会看一下。 - Sir_Red_DAB

我不知道是怎么做到的，但我删除了所有选项并添加了其他一些东西，现在一切都运行良好... 不管怎样，还是谢谢你的帮助。 - Sir_Red_DAB

Answer 1

我找到了以下解决方法，虽然不是最好的结果，但对我而言可行。 将Y值设为1或2，因为Firefox似乎无法处理0。

window.scrollTo(0, 2);

- GlobalPlayer

Answer 2

将您的路由器配置更改如下：

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

- Rijosh

---

尝试了两个选项，仍无法解决Firefox上的问题。我在 main.js 应用了第一个选项，因为该页面使用了 vue-router。由于出现了错误，我不得不将代码更改为 router.scrollBehavior = function(to, from , savedPosition) {}，但仍未生效。 - Sir_Red_DAB

我不知道怎么做的，但我删除了所有选项并添加了一些其他内容，现在它正常工作了...无论如何，还是谢谢你的帮助。 - Sir_Red_DAB

@JosBroers 我在使用Firefox时也遇到了同样的问题（即使使用scrollBehavior），我很想知道你是如何解决它的！ - Sameh

@Sameh 我没有修复它。我改为添加了一个淡入淡出的过渡效果。 - Sir_Red_DAB