Gatsby: Scroll to named anchor (page fragment)

[Alxandr]

I've added a <a name="comments" /> on some of my gatsby pages, and links to them using <Link to="/link/to/page/#comments />. The comments are on the bottom of the page, yet when I go to the link it scrolls me to about the middle. This likely happens because the page isn't done rendering/resizing yet.

[benjaminhoffman]

This may be an issue with gatsby taking control of scroll. Trying adding this to your gatsby-browser.js file. (https://www.gatsbyjs.org/docs/browser-apis/#shouldUpdateScroll)

exports.shouldUpdateScroll = args => {
    return false;
};

Closing this issue for now due to lack of activity but feel free to re-open if the above doesn't solve your problem and/or you are still searching for a fix.

[sedstan]

I'm still searching for a fix. The above did not work for me.

[maxbeier]

Had a similar problem so maybe this helps future others:

If you're using gatsby-remark-autolink-headers, it adds a script that interferes with jumping to a fragment. The code in gatsby-ssr.js / gatsby-browser.js tries to find the element for the fragment and then scrolls to it relying on offsetTop. This seems to assume that the elements offsetParent is body. The behaviour breaks if the element has any ancestors with a position other than static.

[dlindahl]

I've also seen the scrollToHash fail to work correctly because React has not yet flushed to the DOM. Increasing the delay to setTimeout from 10 to 100 allows enough time to pass before the element to scroll to is rendered. However, this is an arbitrary value that may vary between pages or sites.

I don't have a great solution for this aside from either providing a custom setTimeout delay value that is configurable in gatsby-config.json or export something that can be called from a root component's componentDidMount, neither of which are particularly great...

[jonauz]

How to override/take control of Anchor clicks?
There is no good implementation for this, but I also can't find how to override the default.
In our case default is not working, because we need to scroll not the main page but content in one of div elements.
And content is build using remark transformer, there for don't have direct access to link components, and don't want to handle each small peace separately from Markdown files.

[donaldboulton]

I am trying to implement t simple TOC by just adding tableOfContents to my post query and then
in my TOC menu component add
<TableOfContents id='link' dangerouslySetInnerHTML={{ __html: post.tableOfContents }} />
But if I click on a toc link it just goes to the top of the page body

This happens because the links in markdown are just an a tag placed on the page from dangerouslySetInnerHTML. This means no event listeners or anything, just a plain old fashioned link. The solution is to parse the HTML string and swap out the links for the proper React components.
I am Trying to override this with documentation from the below post.

Use HTMR

Just found this will try to implement it soon and get back to the 6 or so Gatsby issues that address these link to anchor hash issues.