React Router Hash Link: Anchor tag does not scroll to expected position

Viewed 707

I use react-router-dom in my project and facing difficulties with navigating to the proper position on the FAQ page (https://search-guard.com/faq). I tried anything from just using a tags, react-router-hash-link, I even tried to generate random IDs for the anchors with uuid (which somehow was the worst outcome) but the result is always the same: some links work perfectly fine (mostly the first few links and the last ones) but some are just landing 'too low'.

I even tried to use ul and li instead of just div code structure but again: the result is always the same and I have no clue why. Does the problem sound familiar to anyone? I thought that react-router-hash-link was developed to solve it but unfortunately it didn't.

The solution for now is adding some padding for those links where it doesn't reach the expected position. Cherry on top: it's not working at all on mobile.

0 Answers
Related