Gatsby: Any way to disable Gatsby returning to scroll position on refresh?

[notbrian]

Description

I don't want Gatsby to save the scroll position on refresh, instead I want it to start at the top of the page.

I tried using shouldUpdateScroll() returning false in gatsby-browser.js but that doesn't seem to disable this functionality.

exports.shouldUpdateScroll = () => { return false; };

Expected result

Disables Gatsby starting on the previous scroll position on a refresh.

Actual result

Gatsby stays at the same scroll position on refresh

[wardpeet]

Hi @notbrian !

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

I'm thinking that you're hitting the default browser behavior. Please have a look at https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration

Thanks for using Gatsby! 💜

[notbrian]

Hey @wardpeet I couldn't get that route to work as history.scrollRestoration is already set to manual, assuming this is related to the scroll-behaviour package included with gatsby.

Instead, I just decided to scroll the window to the top of the page in my gatsby-browser.js on initial client render.

exports.onInitialClientRender = () => {
  window.scrollTo(0, 0);
};

[sidharthachatterjee]

shouldUpdateScroll not working is likely a bug. Thanks @notbrian

Please post a reproduction if you have one.

[notbrian]

shouldUpdateScroll not working is likely a bug. Thanks @notbrian

Please post a reproduction if you have one.

I think I was reading something that shouldUpdateScrollonly runs when navigating to a new page, not refresh of the same page. My application behaved like this.

[sidharthachatterjee]

I think I was reading something that shouldUpdateScroll only runs when navigating to a new page, not refresh of the same page. My application behaved like this.

This is true indeed. shouldUpdateScrollonly is only called on navigation.

Perhaps return [0, 0] to reset back to the top?

exports.shouldUpdateScroll = () => { return [0, 0] }

Curious if this works. Let me know!

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[alainpatrick]

@sidharthachatterjee it doesn't work.
nothing works so far.

I tried this:

export function shouldUpdateScroll() { return [0, 0] }

export function onInitialClientRender() { window.scrollTo(0, 0) }

clearly shouldUpdateScroll isn't fired in gatsby-browser.js

export const shouldUpdateScroll = () => { window.scrollTo(0, 0) return false }

still, I navigate to pages and the scroll position stays the same.

[chandlervdw]

I can get shouldUpdateScroll() to fire in gatsby-browser but neither returning false nor firing window.scrollTo(0,0) does what it claims it should.

[chandlervdw]

After digging, I've realized that when shouldUpdateScroll() fires, window always has scrollY: 0 and scrollX: 0, regardless of how far down the screen I have scrolled. Thusly, window.scrollTo(0,0) does nothing... so something isn't updating the scroll position of window within gatsby.

Personally, I think this feature is a bit of a black sheep. Everything else about gatsby makes so much sense but I've fought this one for far too long just to try and restore what I would call normal functionality...

[dnakhla]

@chandlervdw check to see if perhaps you have a div with 'overflow' set to auto or scroll. I tihnk this would require you call ScrollTo on the div not the window

[zslabs]

Not sure if it's appropriate to re-open this one or just leave https://github.com/gatsbyjs/gatsby/issues/19480 open, but that link has a reproduction repo (just updated the deps as well to confirm this is still an issue).