Question

我目前正在构建一个网页，其中一些元素放置在靠近顶边的固定位置。所以每当我导航到锚点时，那些就会被放置在那些固定元素下面。我想知道是否有一些样式或其他方法在导航到锚点时，会发生一些额外的偏移/边距？

示例源代码

<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）。这与元素边距无关，因为它们会影响布局。但这不是关于布局，而是提示滚动行为。

Answer 1

为了获得一个跨浏览器/跨设备的解决方案，您的锚点确实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。

Answer 2

以下是我的解决方案：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。另外，这样做的另一个好处是你不必搞乱调整文档的流程;你只是改变一个看不见的锚标签的流程，这使维护更容易

锚链接和边距

2 个答案: