当有固定的导航栏时跳转到页面的不同部分[重复]

Posted 2023-02-22

【中文标题】当有固定的导航栏时跳转到页面的不同部分[重复]

【英文标题】：Jump to different sections of the page when theres a fixed navbar [duplicate]

【发布时间】：2017-04-16 14:42:21

【问题描述】：

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

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

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

我尝试使用我看到的使用 .offset() 的 jquery 解决方案的几种不同变体，但它们都没有效果。任何意见表示赞赏

注意：当我使用 jQuery 或 javascript 跳转部分而不是 href 标签时，它的行为完全相同。

【问题讨论】：

固定导航栏会在内容之上，不会将部分内容向下推，快速解决方案在每个部分的 padding-top 中添加导航栏的高度；或者使用js移动滚动高度导航栏的负值

哦，伙计，我实际上并没有改变填充，我不确定这是否会看起来很糟糕。我已经尝试使用 js 滚动到负值，但它似乎没有做任何事情

我想这已经回答了好几次了，除非我误读了你的问题：***.com/questions/9047703/…***.com/questions/10732690/…

你可以看到这个：***.com/questions/4086107/…

【参考方案1】：

您不需要 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>，如果您希望它看起来像一个按钮，请将其设置为一个按钮。

【讨论】：

网站上的按钮已经有了样式，所以我没有重复这个页面的样式，我只是在里面放了一个 。

但我会试试这个，谢谢:)

你不需要重复样式，你可以在 CSS 中做 <a class="button"> 和 button, .button。当然，在<button> 中包含<a> 是有效的，它只是......丑陋：D

^这很公平