Anchor link NOT to the Top

Design help Custom code
1

Hello Community and Support - I am having a hard time with anchor links. The following situation:

  • I have a Lotti animation implemented that plays when scrolling through 5 separate sections (all 100VH). It starts at the first and ends at the fifth.

  • I have a right vertical nav bar (in addition to the sticky top nav bar - both custom (offset function doesn’t apply).

  • This vertical nav bar should anchor link to the appropriate section when clicked. 1 to 5 .

  • I have a snap section scrolling implemented with scrollify which works great for all sections. It scrolls smoothly on mouse scroll through the sections and snaps accordingly at the top of the page.

The following problem:

  • When I click on the anchor links (check ONLY vertical nav link 01 and 05 for test purposes) you will notice that it doesn’t stop at the top of the section as it should. Black div (which I tried to use for the section scrolling as well) stops at about 15% of the bottom of the page and doesn’t scroll up to the top. Same effect with having it implemented in tha actual section and not in a small div.

I have tried almost everything I have found on the forum:

  • Offset not available as I use a custom nav

  • impement a 1px Div and reference the anchor link to it (actual situation on link 5)

  • Set section ID accordingly, set anchor link to section ID

  • Tried custom attributes: data-scroll:“mid” => didn’t work at all.

  • tried custom attribute data-scroll-speed: “0” to jump directly to the page as heard that smooth scrolling could be the issue.

  • I have no lazy load image because there is only the lotti and sections have only text.

So for some reason the expected behaviour on section/anchor links scrolling to the top of the page doesn’t work on my project.

Any idea: here is a preview. Would be great to get some advice.

here is the page: https://interchord.webflow.io/

here is the webflow share: https://preview.webflow.com/preview/interchord?utm_medium=preview_link&utm_source=dashboard&utm_content=interchord&preview=377299e2e6dbe8a223e3457452df455a&workflow=preview

best
Oliver

2

Here’s some custom code + a tutorial that solves for this. Only takes a few minutes to get working. #138 - Anchor Link Scroll Offset | Webflow Powerups