Html 锚链接和边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5070751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
anchor links and margins
提问by datenwolf
I'm currently building a webpage where some elements are placed on fixed positions near the top edge. So whenever I navigate to anchors, those get placed right under those fixed elements. I wonder if there's some style or other method that when navigating to a anchor, this happens with some additional offset/margin?
我目前正在构建一个网页，其中一些元素放置在靠近顶部边缘的固定位置。所以每当我导航到锚点时，它们就会被放置在这些固定元素的正下方。我想知道是否有某种样式或其他方法可以在导航到锚点时发生这种情况，并带有一些额外的偏移量/边距？
Example source code
示例源代码
<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>
Say this HTML is available at http://example.com/foobar.htmlone could link to http://example.com/foobar.html/#bar– a browser will scroll to the anchor named/id "bar". But in this example there's that 100px high fixed element, that will obstruct the upper parts of the "Bar" contents. Now I'd like to have some style/option that tells the browser, not to scroll the element to the top of the document window, but to leave a certain "scroll margin" (in this case a scroll margin of about 200px). This is not about element margins, as these influence the layout. But this is not about layout, but giving hints for the scrolling behaviour.
假设此 HTML 可在http://example.com/foobar.html获得，您可以链接到http://example.com/foobar.html/#bar– 浏览器将滚动到名为/id“bar”的锚点。但是在这个例子中，有一个 100px 高的固定元素，它会阻碍“Bar”内容的上部。现在我想要一些样式/选项来告诉浏览器，不要将元素滚动到文档窗口的顶部，而是要留下一定的“滚动边距”（在这种情况下，滚动边距约为 200 像素）。这与元素边距无关，因为它们会影响布局。但这与布局无关，而是为滚动行为提供提示。
采纳答案by pathfinder
In order to get a cross-browser/cross-device solution where your anchor is truly invisiblein the sense that it does not take up any space on the page, it is important that you format your anchor tag like this:
为了获得跨浏览器/跨设备的解决方案，让您的锚点真正invisible意义上不占用页面上的任何空间，重要的是您要像这样设置锚点标签的格式：
<a name="foo" class="top"></a>
We used a class so you can style all of your anchor tags at once, (assuming the fixed div is part of your normal page template)... you could set it as an ID as the question poses though.
我们使用了一个类，这样您就可以一次设置所有锚标记的样式（假设固定 div 是您的普通页面模板的一部分）……不过您可以将其设置为问题所提出的 ID。
And format your CSS as follows:
并按如下方式格式化您的 CSS：
a.top {
position: relative;
top:-100px;
display: block;
height: 0;
width:0;
}
Using Position: relativeallows you to pull the anchor our of the normal page flow.
使用Position: relative允许您拉动正常页面流的锚点。
setting the topto a negative dimension that equals the height of your fixed element will push the content you are jumping to into full view.
将 设置为top等于固定元素高度的负尺寸会将您跳转到的内容推入全视图。
Browsers such as Chrome do not respect this positioning unless the anchor actually displays. Adding content to the anchor such as will force the anchor to display but in many instances that would create a vertical space as big as the line-height of the <a>, so it is better to set the displayto block and the widthand heightto 0.
除非锚实际显示，否则 Chrome 等浏览器不尊重此定位。将内容添加到锚点，例如 将强制锚点显示，但在许多情况下，这会创建与 的行高一样大的垂直空间<a>，因此最好将displayto 块和widthand 设置height为 0。
回答by Moses
Here is my solution: http://jsfiddle.net/ufewB/
这是我的解决方案：http: //jsfiddle.net/ufewB/
HTML
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
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; }
Basically, I gave the <a id="foo"> </a>the CSS position:relative; top:-100pxand I took all the elements contained inside the anchor and put them next to the anchor instead. I did this because you are in essence creating an invisible link, removing it from the normal document flow, and positioning it 100px higher than it would normally be.
基本上，我给出了<a id="foo"> </a>CSS，position:relative; top:-100px然后我将锚中包含的所有元素都放在锚旁边。我这样做是因为您本质上是在创建一个不可见的链接，将其从正常的文档流中删除，并将其定位在比通常高 100 像素的位置。
Doing it this way, when the page places the hash link at the top of the page, whatever content was next to the link will be 100px lower. Additionally, another benefit of doing it this way is you don't have to mess with tweaking the flow of the document; you're just changing the flow of an invisible anchor tag, which makes maintenance much easier
这样做，当页面将哈希链接放在页面顶部时，链接旁边的任何内容都会低 100 像素。此外，这样做的另一个好处是您不必费心调整文档流；你只是改变了一个不可见的锚标签的流程，这使得维护更容易
