Anchor link jumps to bottom on mobile

Design help Animations & Interactions
1

Hi everyone,

I’m having issues on mobile with the positioning of an anchor-link to a different page.

I have a “Contact” section on the home page, and I have a top nav and a footer nav, both with links to that contact section. I’m using https://ornament-is-crime.webflow.io/#contact-section for the anchor-link.

On Desktop, when I click on the “Contact” menu item/link on the home page or other pages, it jumps to the contact section – with correct position. All good.

On mobile devices, when I click on the “Contact” menu item on the home page, it jumps to the contact section – to the correct position. All good.
But… when I click on the “Contact” menu item on other pages, it jumps to the contact section to the correct position at first (for just a millisecond), but then it goes down to the bottom of the footer. Not good.
See image attached.

Why is this happening?

I tried to have an invisible div on the top of the contact section and set that as an anchor.
No change.

What am I missing? How can I solve that?

Thanks in advance for your advice!

For the read-only link click here

WF_anchorlink_issue
WF_anchorlink_issue1200×1628 320 KB

2

I’m noticing that happening with other anchor links. In some (but not all) cases that may have to do with the scroll-animated top nav bar.

In any case, is there a way to force pages to scroll to the top (or to a specific point) of anchor-linked elements?
With other words can I command something like “when I click this anchor link, go to that page and scroll to the top of that anchor element” or even “…scroll 100 px below the top of that element”?

3

Does anyone have a solution for this?