gatsby: Internal anchors with hashes not working

A PR with the fix for this based on @lukekarrys suggestion above is open now: #28555

I found a very nice workaround. No need to keep older versions or use any effect hooks.

Write the following lines of code in the file gatsby-browser.js:

export const shouldUpdateScroll = ({ routerProps: { location } }) => {
  if (location.hash === '') {
    window.scrollTo(0, 0);
  }

  return false;
};

This seems like too simple of a fix for it to be right, but does this work for anyone else? I noticed that in the gatsby-react-router-scroll/scroll-handler it was checking for a scroll position of 0 in order to scroll to the hash node. I confirmed on my site that if I was scrolled to the top of the window it worked, but if I was scrolled down at all it didn’t.

So I experimented by running patch-package with the patch below and it worked for me.

diff --git a/node_modules/gatsby-react-router-scroll/scroll-handler.js b/node_modules/gatsby-react-router-scroll/scroll-handler.js
index 91114f2..9284f09 100644
--- a/node_modules/gatsby-react-router-scroll/scroll-handler.js
+++ b/node_modules/gatsby-react-router-scroll/scroll-handler.js
@@ -104,7 +104,7 @@ var ScrollHandler = /*#__PURE__*/function (_React$Component) {
       scrollPosition = this._stateStorage.read(this.props.location, key);
     }
 
-    if (hash && scrollPosition === 0) {
+    if (hash) {
       this.scrollToHash(decodeURI(hash), prevProps);
     } else {
       this.windowScroll(scrollPosition, prevProps);

Hold your horses Gatsby bot - I don’t think this is fixed and patch-package is a hack/workaround. Not stale!

What is the verdict on this? I am concerned it will affect SEO on a large number of my clients pages if the links are not connecting properly.

It looks like this is happening again on Gatsby v5. I noticed the behavior appearing after migrating this week from v4.

I am also having this issue.

+1

@lukekarrys patch seems to be working well for me though.

I should point out as well that the hacky workaround isn’t ideal because it doesn’t move focus to the correct place in the document when you load a page that includes a hash. So keyboard users who try to tab from the id matching the hash can’t and they start back at the top of the document. So not great for accessibility. So use that workaround with caution until it’s fixed. (this is because it missed out on all the goodness from #24306)

I think I have a workaround that seems to be OK (if hacky). There were various comments on #25554 about downgrading gatsby (e.g. to 2.24.18) or downgrading gatsby-react-router-scroll to 3.0.3. Downgrading gatsby seemed to introduce other issues, for example I came across #20082 and I wasn’t a fan of downgrading the whole of gatsby just to fix this issue. So I opted for the specific version of gatsby-react-router-scroll, like the comments.

I checked our existing package-lock.json and it was using gatsby-react-router-scroll@3.0.0, so I went with that version to be safe, although people do seem to suggest 3.0.3 would be OK. (I haven’t actually reviewed which version the issue was introduced in).

Unfortunately, the idea of using resolutions in package.json, although great if you’re using yarn, didn’t work for us as we’re using npm, which doesn’t support resolutions natively (I wonder if that’s the reason for this comment). So instead I used the npm-force-resolutions package to replicate this yarn functionality. So my package.json looks like this:

{
  "scripts": {
+    "preinstall": "npx npm-force-resolutions",
  },
"devDependencies": {
  "gatsby": "2.24.3",
+  "gatsby-react-router-scroll": "3.0.0",
},
+"resolutions": {
+    "gatsby-react-router-scroll": "3.0.0"
+  }

Notice I needed gatsby-react-router-scroll in both devdeps and resolutions to avoid getting “Can’t resolve ‘gatsby-react-router-scroll’ in ‘.cache’” errors, even though I’m not using it as a dependency directly.

To be honest, it’s a bit hacky but it does mean it works as I was being blocked from any new releases because of the functional regression and the trouble I was having downgrading. I can easily back out the line in the diff above when the issue is fixed.

@josephmarkus maybe this could fix your issue?

@edysmp it doesn’t fix it for me unfortunately… 😦

Still not resolved AFAIK actions bot

@dalxds not used themes, but probably makes sense to be in the app’s I think