Internal website anchors not always working

[MarcoAdinolfi]

Good evening, I built the website diamantesas.netlify.app with GatsbyJS. I have a problem with the anchor links inside the website: sometimes they work sometimes they don't and I don't know why. Gatsby Documentation recommends to use <a> tag for the anchors, and I so I did, but they weren't always working. I looked into Stackoverflow and other forums and I found that for some people <a> was the right tag and for others <Link> (Gatsby Link) was better. So I tried with Link and actually now the anchors work better, more times, but not always.
I have a scroll-behavior: smooth in my CSS, I don't know if it can have a part in the problem.

Some examples of some of my anchors with <a> tag:

• <a href="#top"><h4 id={footerStyle.scrittaSu}>su</h4></a>
• <a class="link-freccina-giu" href="#pre-footer">

And with <Link> tag:

• <Link to="#top" id={footerStyle.tornaSuMobile}>
• <Link class="link-freccina-giu" to="#pre-footer">

This one <a href="#top"><h4 id={footerStyle.scrittaSu}>su</h4></a> it's in my Footer component and should go to

of the "/home-clienti" page, but it doesn't, instead it only does it in the other pages of the website.

Why does it work better with <Link> if it's recommend to use <a> in Gatsby Doc?
And could anyone help me fix this problem please?
Thank you