Anchor Links on the same page causing a refresh. Why?

As an example, please click the down arrow on the bottom of this hero section.

It goes to #start, which should scroll down. The refresh also removes any elements above the anchor point.

Using codegen.

Hi, I don’t follow. Looking into your page, the link is going from / to /contact/#start, so it’s not expected to scroll down since those are two different pages.

Apologies @fmota, i think I had updated the page since sharing here.

Please try this page. Click any of the dots on this map. It scrolls you down to the relevant section, but there is a “load” or some event that happens on the first click that does not happen on subsequent clicks. What goes on on the first anchor click that shifts the page layout upwards?

You can see that the top is cut off, and the bottom of the footer is also raised from the bottom of the page. @yang or anyone else any ideas?

Same issue is sitewide:

Click the arrow on the bottom of the hero section and it will cut off the top of the page.

In fact, just visiting an anchor URL exhibits the same issues. Go to this link and the entire page will be raised.

Some digging reveals that the footer is either the issue or a side-effect of a bigger issue.

When I click an anchor link and it takes me down the page and I can no longer scroll up, removing the footer in inspector brings things back to normal. To double check, removing the footer in Plasmic Studio permanently also resolves the issue.

For clarity, the footer is inside my pager wrapper that contains a navbar, footer and a slot for page content.

Fix found, but would like some clarity on this issue if possible:

Removing vertically-overflowing elements from the footer solved this.