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

问题描述

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

注意：我使用 Wordpress 构建了这个页面，使用了自定义 HTML 和 Beaver Builder 网站构建器的组合。Wordpress 主题是 Astra。

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

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

但是，如果您单击“向 Consuelo 提出问题”，然后关闭弹出窗口，则页面不会滚动（这是我对所有其他模式弹出窗口感兴趣的实现）。

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

我确实注意到了一种模式...“Ask A Question”按钮的弹出窗口包含一个表单（来自 Wordpress 插件，Ninja Forms），它是我网站服务器上的本地资产。“预约”和“安排聊天”的弹出内容<iframe>是<script>从外部来源（Acuity Scheduling）提供的。我只是为模态弹出内容嵌入他们的代码。（在下面提供，但为了隐私而受到审查）。我不确定这是否/为什么会使页面跳转，但认为值得一提，因为这些弹出窗口是唯一使页面跳转的弹出窗口。

最后，我也在页面上使用了一个名为“page scroll to id”的 Wordpress 插件，但我尝试停用它并没有任何区别，所以我认为可以肯定地说这个插件没有影响这个问题。

按钮的 HTML： <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 Scheduling 嵌入的代码： <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>

预期/期望的结果：关闭模式弹出窗口时没有“滚动到顶部”。

实际结果：有些弹出窗口会导致页面滚动到顶部，有些则不会。

（我在过去一年左右一直在学习编码。我喜欢它，但我还有很多东西要学！提前谢谢！）

标签： wordpresspopuponepage-scroll

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

问题描述

解决方案

推荐阅读