带有滑动功能的导航中的锚链接跳得太远

Question

导航link "Leistungen"（在下图中标记为黑色）正在link指向一个可以找到轮播滑块的锚点。子菜单做同样的事情+触发功能以滑动到相关的轮播幻灯片。

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

但出于某种原因，如果您加载以下站点并尝试它，它会跳得太远（下图）：https://bm-translations.de/

奇怪的是，如果你第二次点击同一个导航 link，它会跳到正确的锚点。

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

Answer 1

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

它正在向下滚动到块元素（我假设某些 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 都有自己独特的 padding-top。

之前：

之后：

Answer 2

找到解决方案：

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

带有滑动功能的导航中的锚链接跳得太远

anchorlink in navigation with slide-function jumps too far

html

javascript

css

anchor

jquery