In page linking is buggy

i used this tutorial Show & Hide Elements on Click - Webflow interactions and animations tutorial - YouTube and everything works fine
the button i have opens a form and when clicked again it closes the form.

i gave the form an ID and told the button to in page link to that id so when i click the button it would scroll down to the form. The problem arises after i close the form and reopen it, it does not scroll down to the form, it goes the opposite way to the top of the page. any reason why it would scroll to the form on 1st open and do the opposite direction for any consecutive attempts?

Web browsers just scroll where you tell them to, at the moment you tell them to.

However you’ve setup your form, pop-up, interactions, etc, it seems the ID’d element is still hidden ( therefore at 0, 0 ) at the moment you’re trying to scroll.

So your browser takes you there, right to the top of the page.

The bug you want to fix is to make certain that the form is visible and at the correct location before you initiate the scroll.

thanks that makes sense, but why would it still scroll up to the top sometimes when it is not hidden after a consecuative opening(button interaction) of the form? Also what is something in webflow i can do to make it so it scrolls down to the revealed form after the form is visible, is there a delay i can put on in page linking? or is there a better option? how would i achieve the visible and at the correct location before you initiate the scroll.

My guess would be timing, the form isn’t actually visible at the moment the browser tries to navigate there. It takes a few milliseconds for script to run…

Yes, you can tell the browser to scroll in script. Ideally, you’d un-hide your elements, and then scroll once you’re certain they’re visible. If you’re using interactions, then obv you don’t control that script, and won’t know when its complete. A timer delay could work.

Absolutely. Don’t hide the form. It complicates your navigation.
Alternately, you could do a lightbox, so that it does not matter where you are in the page position-wide.