Gatsby: Reset Scroll Position after page is loaded

[ziyafenn]

Description

Each time i load new page, the scroll position stays same as it was on the previous page.
I want to reset the scroll position each time page is reloaded.

Environment

Gatsby version: 1.9.130
Node.js version: 6.10.2
Operating System: mac OS High Sierra

File contents (if changed):

gatsby-config.js:
package.json:
gatsby-node.js:
gatsby-browser.js:
gatsby-ssr.js:

Steps to reproduce

I've tried all solutions mentioned here: https://stackoverflow.com/questions/33188994/scroll-to-the-top-of-the-page-after-render-in-react-js and none of it helped. (i was adding those to html.js)

...

[KyleAMathews]

Can you try reproducing this issue with one of the official starters?

[ziyafenn]

@KyleAMathews with blog starter i couldn't reproduce it.

But with this one i could http://gatsby-forty.surge.sh/

if you will open any page, then remove the path from the address bar and go to landing again, the scroll position will not reset.

[KyleAMathews]

Ahhhh gotcha! Yeah, this is a bug. If you'd like to take a crack at solving the problem, the code for restoring scroll is in https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-react-router-scroll

[ziyafenn]

@KyleAMathews tried my best, couldn't get it work :(
P.S. you have to label it with Bug ;)

[ajcarpenter]

I'm also hitting this issue. It seems that location.key is always undefined on all pages in my project at this line:

https://github.com/gatsbyjs/gatsby/blob/84bfc00a0cacc004dc8adbb8e119ed2e1d9a6e34/packages/gatsby-react-router-scroll/src/StateStorage.js#L49

Should this have a value? Or would it make more sense to use location.pathname here?

[TomiTakussaari]

I am also seeing this sometimes. For me it seems to happen mostly on mobile devices, so I was wondering if it could have something to do with preload on gatsby-link ?
Eg. if it would work somehow differently based on whether new page resources are already preloaded, or if it has to wait for page resources to load ?

Have'nt done any real debug of it yet though.

[calcsam]

Github has a similar behavior if you refresh the current page, however if you go to a different page the scroll location is not preserved. Gatsby preserves your location on this starter if refreshing the current page as well.

I can also reproduce this on the official blog starter using http://gatsbyjs.github.io/gatsby-starter-blog/hello-world/ and http://gatsbyjs.github.io/gatsby-starter-blog/hi-folks/.

[monsieurnebo]

Similar issue here:

Page A: I'm scrolling to - let say - 50% of the page height, then click on a Gatsby Link.
Page B: I'm on the new page, on the top. I click on a link to go back to the previous page.
Page A: The page opens on the same position as I was when i leaved out, instead of the top.

[ryanwiemer]

@monsieurnebo, not sure if this is helpful or not but instead of dealing with the issue that you described I decided to simply force it to start at the top every time. Not very elegant but it was better than the current behavior for my use case.

https://github.com/ryanwiemer/rw/blob/907ee95cc39c97eb560ec39b02a7b76ad116d5c9/gatsby-browser.js#L4-#L10

[ryanwiemer]

@monsieurnebo I know I just responded to this yesterday but you might want to check out the suggestion from @dsbrianwebster. His solution gave the added benefit of remembering the scroll position when using the back button or if the webpage is manually refreshed. I ended up switching to his suggestion.

See: https://github.com/ryanwiemer/rw/issues/1

[monsieurnebo]

That's working fine !

Thanks for the information @ryanwiemer 👍

[KyleAMathews]

This should restore the correct behavior folks https://github.com/gatsbyjs/gatsby/pull/3775