Bug: vertical scroll retained when navigating between pages

[calumbell]

Currently, if you navigate from one page to another page on site the vertical scroll position is remembered. So when you are navigating between two pages that both overflow the browser window, you will not see the top of the new page, but somewhere further down the page.

I have noticed that this bug occurs on both the live site and the staging branch, but it happens much less consistently on the live site.

Recreation

We'll use the Cleric & Cleric subclasses pages in this example, but this behaviour can be observed on many routes.

0 - Spin up the staging branch on your local machine

1 - Visit /classes/cleric page. Scroll down until you see the subclasses. Note the y-scroll position.

2 - Click on one of the subclass links, ie. /classes/cleric/life-domain . Notice that you are not taken to the top of the page as you'd typically expect, but to the bottom of the page.

Desired Behaviour

When navigating to a new page, you could be taken to the top of that page.

[christophermiles]

I imagine this can be addressed by setting the scrollBehaviour property in the Vue Router config. There are various approaches to interacting with the Vue Router config in Nuxt. See nuxt/nuxt#14544 (comment)

Are we making any changes to the router options anywhere else? If so, would be best to set the scrollBehaviour there. As far as I can see, we don't yet have an app/router.options.ts file.

[calumbell]

That looks like it could well be our problem, thanks for digging that up.

I have some time mid-week, i'll take a look into this then (unless it has already been fixed, or is assigned to somebody else)