How to stop window retaining scroll position on navigation

[jwpf100]

I'm trying to make a traditional website experience where scroll isn't retained i.e. I scroll to the bottom of my home page, click on a navbar link to take me to an 'about me' page and the about me page renders with the view window/scroll position already at the top of that page - without any type of scrolling transition effect.

Currently when I move between pages on my site, if I've scrolled down a page then try to open the next page, the new page opens with the window in the same place and then there's a visible transition while it scrolls to the top.

I've looked in the docs at the useScrollRestoration hook but can't work out how to implement that. I'm using gatsby 3.0.4 and my page has a layout wrapper, not sure if that impacts things per this issue: #26861.

Code on my about-me page is below.

Any help would be appreciated :-)

export const AboutMePage = ({ data }) => {

  const scrollRestoration = useScrollRestoration(`scroll-restoration-key`);

  return (
    <Layout {...scrollRestoration}>
      <SEO title="About Me" />
      <HeroBanner />
      <ContentBlock />   
    </Layout>
  )
}

export default AboutMePage

[vladar]

Have you tried using shouldUpdateScroll API?

[jwpf100]

Hi,

Yeah I've tried shouldUpdateScroll and it fires fine but I'm still getting the same issue. The code I'm using to test is here:

gatsby-browser.js

export const shouldUpdateScroll = ({
  routerProps: { location, prevLocation },
  getSavedScrollPosition
}) => {
  // const currentPosition = getSavedScrollPosition(location)
  // const queriedPosition = getSavedScrollPosition({ pathname: prevLocation })
  window.scrollTo(0, 0)

  return false
}

[sasivarnan]

@vladar I am also facing a similar issue. Tried using shouldUpdateScroll API, but no luck.

@jwpf100 Did you managed to find a solution for this?

[jwpf100]

@sasivarnan For me it turned out to be a bootstrap issue rather than a gatsby/react issue. Here's a link to the stackoverflow answer:

https://stackoverflow.com/questions/66528483/change-gatsby-link-behaviour-stop-scroll-animation-on-page-change/66711536#66711536