导航中的anchorlink与滑动功能跳得太远

Question

导航链接“Leistungen”（下图中标记为黑色）链接到锚点，您可以在其中找到旋转木马滑块。子菜单正在执行相同操作+触发功能以滑动到相关的旋转木马滑动。

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

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

奇怪的是，如果你第二次点击相同的导航链接，它就会跳到右边的锚点。

为什么会发生这种情况以及如何解决这个问题？

Answer 1

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

它向下滚动到一个块元素（我假设一些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都有自己独特的填充顶部。

在：

之后：

Answer 2

找到解决方案：

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