为什么当模式弹出窗口关闭时网页会滚动？

Question

当关闭某些模式弹出窗口时，页面会跳转到顶部。

注意:我已经使用Wordpress构建了这个页面，使用了自定义HTML和Beaver builder网站生成器的组合。Wordpress的主题是Astra。

链接到有问题的页面：http://retirementinsuranceoptions.com/consuelo-avila

进入网页后，单击"Book“选项导航到我遇到问题的部分。你会注意到，当你点击“预约”或“安排聊天”，然后关闭这些弹出窗口，页面将跳转到屏幕顶部。

但是，如果你点击“向Consuelo提问”，然后关闭弹出窗口，页面不会滚动(这是我对所有其他模式弹出窗口所感兴趣的)。

您看到的所有按钮都是带有href="#0“的样式锚定标记。

我确实注意到一个模式..。“提问”按钮的弹出窗口包含一个表单(来自Wordpress插件，忍者表单)，这是我网站服务器上的本地资产。“预订约会”和“安排聊天”的弹出内容是由外部来源(Acuity计划)提供的<iframe>和<script>。我只是将他们的代码嵌入到模式弹出内容中。(以下提供，但出于隐私考虑进行了审查)。我不确定这是否/为什么会使页面跳转，但我认为值得一提的是，因为只有这些弹出窗口才能使页面跳转。

最后，我也在页面上使用了一个叫做"page scroll to id“的Wordpress插件，但是我试着停用了它，但是没有什么不同，所以我想可以肯定的说这个插件不会影响这个问题。

按钮的超文本标记语言：<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>

Acuity调度嵌入的代码：<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>

预期/期望的结果:当关闭模式弹出窗口时，不会“滚动到顶部”。

实际结果:一些弹出窗口导致页面滚动到顶部，而另一些则不会。

(我在过去一年左右的时间里一直在学习编程。我喜欢它，但我还有很多东西要学！提前感谢S.O.!!)

Answer 1

这是一个非常冗余的特性！这不值得你费心