How to save scroll position while navigating between pages using Link from gatsby?

[SilencerWeb]

Summary

As I remember, before, the scroll position was always saved while navigating between pages using Link from gatsby. I remember there were a lot of compliments about it and questions how to prevent this behavior since mostly Gatsby was used for creating websites, not web apps and such behavior is not really common and useful for websites. And right it seems like Gatsby does not save scroll position anymore? But if need this behavior for some pages? Currently, I need it with the usage of navigate from gatsby and wondering if it is possible to achieve this behavior?

[ezvr]

Has there been any further explanation for this? I'm also using gatsby to build a website, which requires that the scroll position is retained.

[benjmo]

I'm actually trying to do the opposite - make a traditional website experience where scroll is not retained.
But I get the scroll retaining behaviour when overflow: auto or overflow: hidden is set on the HTML body.

I was under the impression that this was fixed?

[blainekasten]

@benjmo please open a different issue if you need help with that.

@ezvr and @SilencerWeb gatsby should be retaining the scroll position by default with the same behavior that a browser does when javascript is not involved.

One thing you can do to check is look at localStorage when you're navigating. You should see some keys added for each history element and it's scroll position. Do you not see that? What version of gatsby are you running? Maybe more specifically what version of gatsby-react-router-scroll do you have in your node_modules (use yarn why or npm ls)

[ezvr]

@blainekasten

One thing you can do to check is look at localStorage when you're navigating. You should see some keys added for each history element and it's scroll position. Do you not see that?

Nothing is being added to my localStorage. I do have @@scroll keys in sessionStorage though, and they seem to be working. i.e. being updated. You can observe the problematic website on https://kisik.si/tehnologija/. Try clicking on the menu items on the left, while being scrolled.

Okay, so every time I open the page, a new key seems to be created. It's as though it's not recognizing the website has been already opened before.

I must be creating pages programmatically wrong? Here is my page generation code snippet:

data.forEach((edge) => {
            const slug = edge.node.frontmatter.slug
            const parent = edge.node.frontmatter.parent
            const component = require.resolve(`./src/templates/generic-post.js`)
            actions.createPage({
                path: slug,
                component: component,
                context: { slug: slug, allPages: data },
            })
        })

---

I followed this tutorial. However I didn't do the first part, where it says to create slugs for pages. Because even when skipping that part of the tutorial, the pages seemed to be created and worked just fine.
https://www.gatsbyjs.com/tutorial/part-seven/

---

What version of gatsby are you running? Maybe more specifically what version of gatsby-react-router-scroll do you have in your node_modules (use yarn why or npm ls)

=> Found "[email protected]"
info Reasons this module exists
   - "gatsby" depends on it
   - Hoisted from "gatsby#gatsby-react-router-scroll"

[micha149]

Are you guys scrolling on the window? When setting body to something like height: 100% and defining a custom scroll container, the default scroll tracking will not work. Its looking to scroll events on your window object, but they occur on your scroll container.

You can use the useScrollRestoration hook and attach it to your custom scroll container. But be aware: there is currently a problem when using it in a layout component, which I fixed in #26861.

[piducancore]

Adding the following in gatsby-browser.js is working for me in gatsby 3

// gatsby-browser.js
exports.shouldUpdateScroll = () => false

[othwsav]

thanks, that worked for me.

[dpw1]

I'm using Gatsby 4 and @piducancore 's answer worked for me, I just had to tweak it a bit:

export const shouldUpdateScroll = () => false;

[mihaisavezi]

Gatsby v5 this works, but there are caveats if you want to do your own scrolling via a component i.e. navRef.current.scrollIntoView() after disabling gatsby from handling scrolling via shouldUpdateScroll

[mihaisavezi]

Ok so if you want to scroll to a certain element, we tried the following, but it didn't work ❌

// gatsby-browser.js
export const shouldUpdateScroll = ({ routerProps }) => {
  const { startFromHeading } = routerProps?.location?.state || {};
  const shouldUpdateScroll = !startFromHeading;
  return shouldUpdateScroll;
};

// in a component in the tree, we tried this
export const ScrollToHeading = () => {
  const { state, pathname } = useLocation();

  const navRef = React.useRef<HTMLDivElement>(null);
  const isValidState = isNavigationStartState(state);
  const shouldScrollToHeading = isValidState ? state.startFromHeading : false;

  React.useEffect(() => {
    history.replaceState(null, pathname);
  }, []);

  React.useEffect(() => {
    if (shouldScrollToHeading && navRef.current) {
      navRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }, [shouldScrollToHeading]);

  return <div className="scroll-mt-10" ref={navRef} />;
};

moving all the logic in shouldUpdateScroll did ✅

// gatsby-browser
export const shouldUpdateScroll = ({ routerProps }) => {
  // https://www.joshwcomeau.com/gatsby/the-worlds-sneakiest-route-change/#preserving-scroll-position-4
  const { startFromHeading } = routerProps?.location?.state || {};
  const shouldGatsbyUpdateScroll = startFromHeading ? false : true;
  if (shouldGatsbyUpdateScroll) return shouldGatsbyUpdateScroll;

  const element = document?.querySelector(`.js-scrollTo--startFromHeading`);
  const offsetTop = element.offsetTop || 0;
  const scrollMarginTop = element
    ? parseInt(window.getComputedStyle(element).getPropertyValue('scroll-margin-top'))
    : 0;

  const total = offsetTop - scrollMarginTop;
  // we're doing window.scrollTo here otherwise it doesn't work for us
  window.scrollTo({ top: total, behavior: 'smooth' });

  return shouldGatsbyUpdateScroll;
};

// in a component we just have
<div className=".js-scrollTo--startFromHeading" />