html - 锚定书签与固定的页面顶部导航冲突

Question

这是我第一次在这里发帖。我已经搜索了一段时间来寻找这个问题的答案，现在我转向这个板，因为它在过去被证明对我有用。

我正在设计的页面主题是一页滚动网站(有点像 http://www.kitchensinkstudios.com/ )。

我在顶部实现了一个固定导航，高度约为 70 像素。在此之下，我创建了链接到导航的部分。这个想法是单击导航中的链接，页面将向上滚动到所选部分。 问题是:由于内部书签的自动性质直接滚动到页面顶部!，这会切断大部分内容。

我试图将隐藏的 div 或带有 padding-top 值的 break 标签添加到相关部分，但是，除了让我与页面顶部保持适当的距离外，它还创建了一个不透明的背景，其值与填充。

有没有人对此有任何建议？

理想情况下，当您选择一个链接时，调用的部分将 float 到页面的中间位置。

非常感谢任何试一试的人!

Answer 1

浏览器的默认行为是将 anchor 滚动到视口(viewport)顶部。

如果您垂直向上偏移 anchor ，您应该会发现它会将内容向下移动等量。

您可以通过将 anchor 的位置指定为“相对”并将“top”属性设置为负值来实现，例如

<a style="position:relative; top: -70px;" name="myAnchor"></a>

一些浏览器似乎需要将 anchor 从正常流中取出，这通过简单地 float 元素来解决。

<a style="float: left; position:relative; top: -70px;" name="myAnchor"></a>

您应该会发现上面的行适用于 FireFox、Chrome 和 InternetExplorer。