Scroll to #Id

[Luisdv93]

Summary

I'm having this issue where I have some Link Components pointing to /#someId on my index page, they work while I'm at the index page but while on other pages they bring me to the top of the page instead of the container with the id.

Not sure if this is normal or if I need a specific configuration to make this work.

Relevant information

Environment (if relevant)

System:
OS: Linux 4.15 Ubuntu 18.04.1 LTS (Bionic Beaver)
CPU: x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
Shell: 4.4.19 - /bin/bash
Binaries:
Node: 8.12.0 - /usr/bin/node
npm: 6.4.1 - /usr/bin/npm
Browsers:
Chrome: 69.0.3497.100
Firefox: 62.0
npmPackages:
gatsby: next => 2.0.0-rc.28
gatsby-image: ^2.0.5 => 2.0.5
gatsby-plugin-feed: next => 2.0.0-rc.2
gatsby-plugin-google-analytics: next => 2.0.0-rc.2
gatsby-plugin-mailchimp: git+https://github.com/benjaminhoffman/gatsby-plugin-mailchimp.git#gatsby-v2 => 3.3.0
gatsby-plugin-manifest: next => 2.0.2-rc.1
gatsby-plugin-offline: next => 2.0.0-rc.9
gatsby-plugin-react-helmet: next => 3.0.0-rc.1
gatsby-plugin-sass: ^2.0.0-rc.2 => 2.0.0-rc.2
gatsby-plugin-sharp: ^2.0.0-rc.7 => 2.0.0-rc.7
gatsby-plugin-typography: next => 2.2.0-rc.3
gatsby-remark-copy-linked-files: ^2.0.0-rc.5 => 2.0.0-rc.5
gatsby-remark-images: ^2.0.1-rc.5 => 2.0.1-rc.5
gatsby-remark-prismjs: next => 3.0.0-rc.2
gatsby-remark-responsive-iframe: next => 2.0.0-rc.5
gatsby-remark-smartypants: next => 2.0.0-rc.1
gatsby-source-filesystem: next => 2.0.1-rc.6
gatsby-transformer-remark: next => 2.1.1-rc.5
gatsby-transformer-sharp: ^2.1.1-rc.3 => 2.1.1-rc.3
npmGlobalPackages:
gatsby: 1.9.277

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[CanRau]

Have you found/checked those?
#1719 "Scroll to named anchor (page fragment)"
#3318 "Smooth scrolling by Links"
#3249 "Reset Scroll Position after page is loaded" (maybe not exactly but might help)
Found them by G' searching for "gatsby scroll to id"

Please let me know if they helped or not

[Luisdv93]

#1719 I already tried this one and it didn't work.
#3318 Replaced my Link components with regular a tags but it didn't work either.
#3249 Throws this error in the console: Uncaught TypeError: Cannot read property 'action' of undefined

[CanRau]

Could you provide a link to the repo if not private/confidential or make a reproduction repo so I can get more context please?

[EDIT] This is what I'm using gatsby-browser.js the scrollToMenu makes it so that you won't start at the very beginning on every page but only on first view and while navigating inside the page start right at the main menu/content, not exactly the same but maybe it helps

Uh-huh that's an old commit but might help? Cause I checked for # in path to determine if scroll should update or not…

[Luisdv93]

Just tried that and it didn't help, actually it made it worse because it wasn't even scrolling to the anchor when I was inside the index.

From what I can tell it seems to be a problem with the scroll history, not sure if the right term. Say for example I start the dev server and instead of jumping to the index I go to /services and then I try to go to /#contact it works, but if I access /services from the middle of the index if I try to go to /#contact it will take me to the middle of the index (where I clicked /services)

Not sure if I'm explaining it correctly. But anyways, the repo is private so I'll try to make a copy of it and remove sensitive data. I'll comment again once I have the repo up.

Thanks for the help so far!

[CanRau]

are you still on the versions from your first post? if so you could try upgrade to latest stable, don't remember when it was but some scroll related issues have been fixed recently
Otherwise I'm awaiting your repro :)
And you're of course welcome 👍

[Luisdv93]

Hey I just uploaded a copy of the repo, so you can clone it and reproduce the bug: https://github.com/Luisdv93/gatsby-scroll-bug

What's the recommended way of upgrading the gatsby version?

[CanRau]

Thanks!
Not the master myself I would say at this point it could be interesting to pin the versions now they're officially released, so disastrous version issues are less likely later on.
I did it by changing all "next" versions in package.json manually to the desired version (I chose latest stable) and then did yarn / yarn install ah in your case npm i / npm install

Okay, cause of my slow internet it took longer than intended but here I am now^^
You might already got the PR notification, maybe it's overkill but just in case ;)
Here the link to my the gatsby-browser.js
hope it does what you want, it's actually a stripped down and slightly modified version of the one I'm using in the repo I linked
Let me know how it goes

[Luisdv93]

Dude you rock! Thank you so much for the fix, this was causing me a big headache at work, glad I can finally get that to work.

It's working great!

[CanRau]

You're welcome! I'm glad I could help 👍

[iloveip]

@CanRau Hi, thank you very much for your example of gatsby-browser.js. It helped me fix the same issue with scrolling. I have one more question. Do I need to add the same code to gatsby-ssr.js? Thank you very much in advance!

[CanRau]

No, gatsby-ssr.js doesn't provide that API https://www.gatsbyjs.org/docs/ssr-apis/

Usually https://www.gatsbyjs.org/docs/browser-apis/ mentions when you have to add an API to ssr as well 😉

[iloveip]

@CanRau Oh, yes, I see now. Thank you very much 🙏