In my nextjs app I have a page with some content that is loaded dynamically using react-query (i.e. it changes its size because initially spinner is rendered and then it is replaced by proper content) and with #reviews div that stores reviews. I have an url like this:

http://localhost:3000/articles/test-5853#reviews

and the problem is that when I open it, the page is not scrolled automatically to #reviews element. Instead, it tries to scroll to this element but it is immidiately scrolled up to the top of the page.

I’m wondering whether maybe I should somewhow disable this default behaviour and instead scroll to element using useEffect and some timeout to wait untill all elements are loaded.

Do you have any recommendations to make it works for all pages automatically?