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:

gatsby/packages/gatsby-react-router-scroll/src/StateStorage.js

Line 49 in 84bfc00

const locationKey = location.key

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.