javascript - 具有滑动功能的导航中的 anchor 链接跳得太远

Question

导航链接“Leistungen”(下图中标记为黑色)链接到一个 anchor ，您可以在其中找到轮播 slider 。子菜单执行相同的操作+触发函数以滑动到相关的轮播幻灯片。

<a href="https://bm-translations.de/#leistungen" onclick="document.getElementById('carousel-selector-1').click()">Beglaubigungen</a>

但是出于某种原因，如果您加载以下网站并尝试一下，它会跳得太远(如下图):https://bm-translations.de/

奇怪的是，如果您第二次单击相同的导航链接，它会跳转到右侧的 anchor 。

为什么会出现这种情况以及如何解决？

Answer 1

在您的页面中，单击该菜单链接后，它会向下滚动到该部分在文档中的位置。

它正在向下滚动到一个 block 元素(我假设某些 JS 脚本可以顺利地将其滚动到 ID):

<div class="row" id="leistungen"></div>

在直接位于该 div 内部的 H2 元素中，您的标题顶部有一些填充:

<h2 style="text-align:center;font-size:24px;padding-top:30px">Leistungen Ihres Übersetzungsbüros</h2>

如果您自己添加了该填充，请继续将其增加到 90px(或您想要的任何数量)。

或者只需将其添加到 css 文件的底部:

#leistungen > h2 { padding-top: 90px; }

唯一的选择是编辑创建平滑滚动功能的 JS。

编辑:我什至建议在 css 中简化 H2 填充，而不是在页面上...每个 H2 都有自己独特的顶部填充。

<小时/>

之前:

之后: