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

时间:2013-10-23 04:16:01

标签: html css bookmarks vertical-scrolling

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

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

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

我试图将隐藏的div或break标签添加填充顶部值到相关部分,但除了给我一个距页面顶部适当的距离外,它还会创建一个不透明的背景,其值与填充。

有人对此有任何建议吗?

理想情况下,当您选择一个链接时,被调用的部分将浮动到大约页面的中间位置。

非常感谢任何给这个人开枪的人!

1 个答案:

答案 0 :(得分:1)

浏览器的默认行为是将锚点滚动到视口的顶部。

如果您将锚垂直向上偏移,您会发​​现它会使内容减少相等的数量。

您可以通过将锚点的位置指定为“relative”,并将“top”属性设置为负值来实现此目的,例如

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

有些浏览器似乎需要从正常流程中取出锚点,这可以通过简单地浮动元素来解决。

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

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