3

I'm currently using Gridsome in my portfolio website. But when I'm on the bottom of a page on a mobile/tablet device that is longer then the page I'm navigating to, the page doesn't scroll to the top on Firefox. On Google Chrome it works fine.

I'm using the following code to scroll to the top of a page: 

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

I have tried other solutions, but nothing seems to work. I don't want to use any jquery for this solution.

Sir_Red_DAB
  • 131
  • 6

2 Answers2

1

I have found the following workaround, it is not the best result but it works for me. Set the Y value to 1 or 2, Firefox seems to have a problem with the 0.

window.scrollTo(0, 2);
GlobalPlayer
  • 21
  • 3
0

Change your router configuration like follows,

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

This will scroll to top on every route changes.

If you're not using vue-router, then add the following code inside the mounted() hook of your component.

setTimeout(() => {
  document.body.scrollTop = document.documentElement.scrollTop = 0;
}, 500);
Rijosh
  • 1,538
  • 1
  • 8
  • 11
  • Tried both options. Still doesn't solve the problem on Firefox. I applied the first one in `main.js` because the `vue-router` is used on that page. I had to change the code to `router.scrollBehavior = function(to, from , savedPosition) {}` because of an error, but still didn't work. – Sir_Red_DAB Mar 31 '20 at 15:12
  • I don't know how, but I removed all the options and added some other stuff and now it's working fine... Thanks for your help anyway. – Sir_Red_DAB Mar 31 '20 at 16:45
  • @JosBroers I'm running into the same issue with Firefox (even with scrollBehavior), and I would love to know how you fixed it! – Sameh Nov 11 '21 at 01:35
  • @Sameh I didn't fix it. I added a fade in-out transition instead. – Sir_Red_DAB Nov 30 '21 at 16:51