锚链接和边距答案

【问题标题】：anchor links and margins锚链接和边距
【发布时间】：2014-07-30 19:21:04
【问题描述】：

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

示例源代码

<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”内容的上部。现在我想要一些样式/选项来告诉浏览器，不要将元素滚动到文档窗口的顶部，而是留下一定的“滚动边距”（在这种情况下，滚动边距约为 200 像素）。这与元素边距无关，因为它们会影响布局。但这与布局无关，而是为滚动行为提供提示。

【问题讨论】：

我不明白这个问题，你能给我们看看你的作品吗？通过将我们链接到您的页面或在 jsfiddle.net 上制作一个临时示例 :)
看看我那边的回答：stackoverflow.com/a/9506604/143684

标签： html css

【解决方案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 等浏览器不会尊重此定位。向锚点添加内容，例如&nbsp;，将强制锚点显示，但在许多情况下，这会创建一个与<a> 的行高一样大的垂直空间，因此最好将display 设置为块和width 和height 为0。

【讨论】：

很好的解决方案。但是，在 iOS 7 上的 Safari 上，它并没有完全消除它。在 iOS 上的 Chrome 上完美无缺。
很高兴知道，谢谢。你能详细说明它没有削减什么吗？我很乐意用 iOS 7 的解决方案更新答案。
第一次只有一个点击链接，safari跳转到命名锚点，好像没有考虑top值。我想在我的固定导航栏下面的东西最终被部分埋在它下面。请注意，第二次 时间它似乎总是以预期的方式工作。另外，我不知道第一次很可能会忽略 all 的 CSS。正如我所说，在 Chrome 中，它只适用于所提供的完全相同的代码。
附录：在 Safari 中，对于每个指向命名锚点的链接，第一次失败。第二次一切正常。如果我在同一页面上点击另一个锚点（未重新加载），迄今为止未被人手触及，同样的事情会发生：第一次失败，第二次和后续成功。我将调试我的客户端代码，看看问题确实出在上述解决方案上——这还远未确定。
Addendum secundum（或其他）：我宁愿认为我的客户端代码有问题。可以肯定的是，Safari 处理上述解决方案的方式也有问题，但是我的代码挡住了所有的树，很难准确说出必须修复的内容（如果你理解我的混合隐喻） .

【解决方案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">&nbsp;</a> 提供了CSS position:relative; top:-100px，然后我将锚点中包含的所有元素都放在了锚点旁边。我这样做是因为您实质上是在创建一个不可见的链接，将其从正常的文档流中移除，并将其放置在比通常高 100 像素的位置。

这样做，当页面将哈希链接放在页面顶部时，链接旁边的任何内容都会低 100 像素。此外，这样做的另一个好处是您不必费心调整文档的流程。你只是改变了一个不可见的锚标签的流程，这使得维护更容易

【讨论】：

听起来是个不错的解决方案，但不幸的是似乎不适用于 Chrome/Chromium。
啊，放一个进入锚就成功了。谢谢老兄。
@datenwolf ：请您更精确地说明“将放入锚点”吗？你把它放在哪里？也许你能发布一个 JSFiddle 链接:)
@Nonepse：我的意思是<a id="foo">&nbsp</a>。看起来，一些浏览器在进行布局计算时需要锚点内的某种内容以供内部参考。
非常感谢！我不确定你会在一年后记得：P