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.
- Anchor links lead to wrong positions on first load
- Anchor link scrolls to wrong area on first click but not second
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?