javascript - 有固定导航栏时跳转到页面的不同部分

<分区>

所以我已经成功地让我的页面通过像这样引用 ID 的按钮跳转到页面上的不同部分

<button id="niftyBtn"><a href="#nifty">Things</a></button></br>
<div id="nifty">Blah</div>

我有几个，它们都转到了页面的正确部分。问题是，页面中包含一个我无法更改的固定导航，并且各部分的顶部位于该导航栏后面而不是下方。

我曾尝试使用我看到的使用 .offset() 的 jquery 解决方案的几种不同变体，但没有一个是有效的。任何输入表示赞赏

注意:当我使用 jQuery 或 javascript 代替 href 标签跳转部分时，它的行为方式完全相同。

最佳答案

您不需要 javascript 解决方案，像这样简单的东西就可以了:

h2:before,h3:before,h4:before {
    content: " ";
    display: block;
    visibility: hidden;
    margin-top: -7em;
    height: 7em;
}

当然，这些是用于标题的，但您可以用类或 ID 代替以获得相同的效果。当然，必须修改测量结果。

顺便说一句，你为什么要使用 <button>包装一个 <a> ？该代码应该只是 <a href="#nifty">Things</a></br>如果您希望它看起来像一个按钮，请将其样式设置为按钮。

关于javascript - 有固定导航栏时跳转到页面的不同部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40919477/