Doesn't scroll to expected location when coming from a different page.

[DanieleSassoli]

When I'm coming from a different route the page doesn't scroll to the expected position but rather the section before it, if I click on a link to a section close to the top the offset isn't too bad, but if I request an offset towards the bottom of the page then it gets worse and worse.
I've seen a few stack overflow posts around this here and here, but no answers.
Has anybody experienced this?

[rafgraph]

Hi, I have not experienced this issue. Do you experience it with the demo app when navigating to section two or three from the home page?

Can you create a minimal reproduction in CodeSandbox? If it's helpful you can fork the demo app in CodeSandbox as a starting point: https://codesandbox.io/s/github/rafgraph/react-router-hash-link/tree/main/demo, thanks.

[rafgraph]

One thought is you might be loading asynchronous content of unknown height on the new route. The scroll could be happening on the new route based on the page height without the new content, and then loading the content causes the offset. In this case, don't add the id to the page that you want to scroll to until the content is loaded as the scroll happens as soon as the id is found.

[DanieleSassoli]

Hi, thanks for the quick response and sorry for the slow reply.
That might well be the case, there's a few carousels in the page that load in an async fashion.
I'm very new to react, have you got any suggestion on what would be the best way to add these id after the page is loaded?

[rafgraph]

If the content that you want to scroll to is unrelated to the carousels, my suggestion would be to layout the page so the height of the carousels is known before the content loads, and then don't worry about waiting to add the id. If the content that you want to scroll to is the async carousel/content, then render a loading spinner/component (which doesn't have the same id) until it's loaded.

Note that if the page has multiple independent async carousels/content loads, you'll be better off using first approach regardless of what you want to scroll to.

[ghost]

If the content that you want to scroll to is unrelated to the carousels, my suggestion would be to layout the page so the height of the carousels is known before the content loads, and then don't worry about waiting to add the id. If the content that you want to scroll to is the async carousel/content, then render a loading spinner/component (which doesn't have the same id) until it's loaded.

Note that if the page has multiple independent async carousels/content loads, you'll be better off using first approach regardless of what you want to scroll to.

Is there a reference/illustration that you can provide for this? I am stuck here as well. The offset doesn't work for me so I need to try to load the component, that is disrupting the scroll before I can add the id.

[shf60]

sometimes the problem happens when the height is auto, you may need to use aspect-ratio instead of height.