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

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…

For me adding the "gatsby-react-router-scroll": "3.0.0", to package.json dependencies fixed the issue.

Here is what I ended up with for the scroll behavior I wanted.

// gatsby-browser.tsx
export const onRouteUpdate = ({ location, prevLocation }) => {
  if (!prevLocation && !location.hash) {
    // do not restore scroll position on page refresh without hash
    setTimeout(() => window.scrollTo({ top: 0, left: 0, behavior: 'instant' }), 0)
  }
}

export const shouldUpdateScroll = ({ routerProps: { location }, getSavedScrollPosition }) => {
  window.history.scrollRestoration = 'manual'
  const currentPosition = getSavedScrollPosition(location) || [0, 0]

  setTimeout(() => {
    if (location.hash) {
      // If hash (`/#something`), smooth scroll to that position
      const item = document.querySelector(`${location.hash}`)
      item?.scrollIntoView({ behavior: 'smooth' })
    } else {
      // when using the browser back/forward buttons or navigating to a different page client-side, instant scroll to its last saved position
      window.scrollTo({
        top: currentPosition[1],
        left: currentPosition[0],
        behavior: 'instant',
      })
    }
  }, 0)

  // do not let gatsby do anything more
  return false
}

I have set the CSS scroll behavior as smooth by default:

  html {
      scroll-behavior: smooth;
  }

i know this is closed but if others find themselves here, like @Alicino88, I found that for me the issues are fixed by setting scroll-behavior: auto !important;. Although in my case it had been set like so:

  html {
      scroll-behavior: smooth;
  }

I found that I could still use smooth scroll by wrapping the specific page I wanted in a wrapper class like so:

.landing-page {
  overflow-y: scroll;
  scroll-behavior: smooth;
  display: block;
  height: 100vh;
}

in this case, the index page needed to be wrapped:

const IndexPage = () => (
  <div className={landingPage}> 
    {children}
  </div>
);

you may need to also offset the scroll positions, say for a nav bar. just add scroll-padding-top: 50px; to the class where the px is your nav bar height.

What has worked for me is to add the following css to the main css file:

:root {
  scroll-behavior: auto !important;
}

So for me removing the “scroll-behavior: smooth” has solved the issue

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 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.

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! 💪💜

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!