我目前正在构建一个网页,其中一些元素放置在靠近顶边的固定位置.所以每当我导航到锚点时,那些就会被放置在那些固定元素下面.我想知道是否有一些样式或其他方法,当导航到锚点时,会发生一些额外的偏移/边距？
示例源代码
<html>
<body>
<div style="position:fixed; top:0px; height:100px; background:white;">
This covers the top 100px of the screen.
</div>
<div style="position:absolute; top:0px;">
<div>
<a name="foo" id="foo"><h2>Foo</h2></a>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua. At vero eos et accusam et justo duo dolores e
ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet.
</p>
</div>
<div>
<a name="bar" id="bar"><h2>Bar</h2></a>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.
</p>
</div>
</div>
</body>
</html>
假设此HTML可在http://example.com/foobar.html上找到,可以链接到http://example.com/foobar.html/#bar - 浏览器将滚动到名为/ id"bar"的锚点.但在这个例子中,有100px高的固定元素,这将阻碍"Bar"内容的上部.现在我想要一些告诉浏览器的样式/选项,不是将元素滚动到文档窗口的顶部,而是留下一定的"滚动边距"(在这种情况下,滚动边距约为200px).这与元素边距无关,因为它们会影响布局.但这不是关于布局,而是提供滚动行为的提示.
pat*_*der 26
为了获得跨浏览器/跨设备解决方案,其中您的锚点invisible确实不会占用页面上的任何空间,因此格式化锚标记非常重要,如下所示:
<a name="foo" class="top"></a>
我们使用了一个类,因此您可以一次设置所有锚标签的样式,(假设固定的div是普通页面模板的一部分)...您可以将其设置为问题所带来的ID.
并按如下方式格式化CSS:
a.top {
position: relative;
top:-100px;
display: block;
height: 0;
width:0;
}
使用Position: relative允许您拉动正常页面流的锚点.
将其设置为top等于固定元素高度的负维度会将您跳转的内容推送到完整视图.
除非锚实际显示,否则Chrome等浏览器不会尊重此定位.将内容添加到锚如 将迫使锚来显示,但会创建一个垂直空间一样大的行高很多情况下<a>,所以最好是设置display来阻止和width和height为0.
Mos*_*ses 12
这是我的解决方案:http://jsfiddle.net/ufewB/
HTML
<div id="container">
<div id="fixed">
Fixed position element
<a href="#foo" alt="foo">Jump to foo</a>
</div>
<div id="spacer"></div>
<a id="foo"></a><h2>Foo</h2>
<p>Lorem ipsum text</p>
<div id="spacer"></div>
</div>
CSS
#fixed {
position:fixed;
top:0;
left:0;
width:100%;
height:100px;
background-color:red;
}
#spacer { height:800px; }
* { margin:0px; padding:0px; }
#container { width:960px; margin:auto; }
#foo { position:relative; top:-100px; }
基本上,我给了<a id="foo"> </a>CSS position:relative; top:-100px,我把锚中包含的所有元素都放在锚点旁边.我之所以这样做,是因为您实际上创建了一个不可见的链接,将其从正常的文档流中删除,并将其定位比正常情况下高100px.
这样做,当页面将哈希链接放在页面顶部时,链接旁边的任何内容都将低100px.另外,这样做的另一个好处是你不必搞乱调整文档的流程; 你只是改变了一个看不见的锚标签的流程,这使得维护变得更加容易