Anchor link scrolls to wrong area on first click

Design help General
1

I have a button on my webflow site that links to a section further down the page. The first time you click the button, it scrolls to the wrong place - somewhere above the section I want to scroll to. On the second click and onwards, it works fine and goes to the correct place.

I found these forum posts where people have had the same issue. It sounds like the it’s related to viewport height not being calculated correctly, and for these people it was happening due to lazy-loading images.

However in my case, the section I want to scroll to doesn’t have images. It’s an HTML embed containing a script which hydrates a div with a custom component. Setting loading=eager won’t fix the problem for me because that property doesn’t apply to scripts, only to images (I think). I think it can also apply to iframes, but I can’t find anything suggesting the html embed is using an iframe.

Can anyone help me understand why my custom component isn’t being including in the viewport height calculation, and what I can do about it?

Thanks!

2

It turns out it was lazy-loading images that were causing the problem! I set loading=eager on all the images higher up the page, i.e. before my html embed block I wanted to scroll to. This fixed the issue.

3

Good job debugging it yourself :smiley:

4

Hello Joineven, thank you for sharing, I was in a similar situation and this fixed the issue for me on desktop. For some reason, though, the section link still lands in the wrong spot the first time it’s clicked on tablet. Do you have any idea why this might be? Thanks again!

1 Like