When closing certain modal popups, page jumps to top.
Note: I've built this page with Wordpress, using a combination of custom HTML and the Beaver Builder website builder. Wordpress theme is Astra.
Link to page with issue: http://retirementinsuranceoptions.com/consuelo-avila
Once you get to web page, click on the "Book" option to navigate to the section that I'm having issues with. You'll notice that when you click on "Book an Appointment" or "Schedule a Chat", then close these popups, the page will jump to the top of the screen.
But, if you click on "Ask Consuelo a Question", then close the popup, the page doesn't scroll (which is what I'm interested in achieving for all other modal popups).
All buttons you see are styled anchor tags with href="#0".
I do notice a pattern...
The popup for the "Ask A Question" button contains a Form (from a Wordpress Plugin, Ninja Forms) which is a local asset on my site's server.
The popup content for "Book an Appointment" and "Schedule a Chat" are <iframe>s and <script>s that are provided from an outside source (Acuity Scheduling). I'm just embedding their code for the modal popup content. (provided below, but censored for privacy).
I'm not sure if/why this would make the page jump but thought it's worth mentioning because of how these popups are the only ones that make the page jump.
Lastly, I use a Wordpress plugin called "page scroll to id" on the page as well, but I've tried deactivating it and it didn't make any difference, so I think it's safe to say that this plugin isn't affecting this issue.
The HTML for the buttons:
<div id="button-only-div">
<a id="bio_book" class="ask-a-question push_button red" style="text-align: center;" href="#0">Book An Appointment</a><br />
<a id="bio_chat" class="ask-a-question push_button red" style="text-align: center;" href="#0">Schedule A Chat</a><br />
<a id="bio_question" class="ask-a-question push_button red" style="text-align: center;" href="#0">Ask Consuelo A Question</a>
</div>
The code for the Acuity Scheduling embedding:
<iframe src="https://app.acuityscheduling.com/schedule.php?(censored)" width="100%" height="800" frameBorder="0"></iframe> <script src="https://(censored).acuityscheduling.com/js/embed.js" type="text/javascript"></script>
Expected/Desired Result: No "scroll to top" when modal popup is closed out.
Actual Result: Some popups cause the page to scroll to top, some don't.
(I've been learning to code for the past year or so now. I love it, but I still have lots to learn! Thanks in advance S.O.!!)
