html - 如何在 html 锚点上考虑正文边距

Question

我有这个页面，顶部有一个固定的nabber（使用默认的引导导航栏）。

该页面包含一个菜单，其中包含使用 html 锚点指向页面不同部分的链接。重点是：滚动位置并不完美，因为我有这个导航栏占据了页面的前50px，所以点击html链接锚定后，内容被导航栏隐藏了50px。

我想要做的是：锚链接考虑前 50px 以将其完美滚动到内容。

有谁知道如何解决它？

Answer 1

您可以在要滚动到的内容上方放置一个 50px 高的 div，然后锚定到该内容：

<a href="#link">Link</a>

<div id="link" style="height:50px;"></div>
<div class="content">
Content Here...
</div>

JSFiddle 演示

或者，给内容 div apadding-top或margin-top导航栏的高度：

<a href="#link">Link</a>
<div id="link" class="content">
    Content Here...
</div>

CSS：

.content{
    padding-top:50px;
}

JSFiddle 演示

Answer 2

使用Twitter Bootstrap，当导航栏固定时，有必要提供额外的间距。

在下面（或之后，您可能会说），您需要提供额外的间距，以便将所覆盖的内容从神秘中解开并变得有用。

进一步阅读：http ://getbootstrap.com/components/#navbar-fixed-top （他们实际上向 body 元素推荐了 70px 的 padding-top）