I have set anchor points in my Webflow project on empty '
’ elements positioned above the actual content. When clicking on the anchor links, the page often scrolls too far down, causing the intended content, like headings or other key elements, to be cut off. This issue primarily occurs when the page isn’t fully loaded.
After manually scrolling and clicking the anchor again, it works correctly. How can I fix this issue? Can you please help me im totally loosing my mind to this :(
Your issue is probably caused by the “reveal up” animation that acts on the #recipe section.
When you click the “Nutrition” button, your target section is further down the page, but once you scroll past the “reveal animation trigger point”, the whole #recipe section moves 20-40px up while it also sets its opacity to 1.
That click on the anchor button is still taking you to the old position that your target element was, even though an animation happened that moved it up 20-40px. That’s why it only happens on the first time, given how the target section stays there after it was revealed the first time.
Solution:
Disable the reveal up animation and do a simple fade-in; or:
Workout the mathematics for always keeping the target section on the same position even during the animation.