更改#anchor 的默认起始位置答案

【问题标题】：Changing default starting position of #anchor更改#anchor 的默认起始位置
【发布时间】：2011-02-14 19:22:36
【问题描述】：

我有一个带有锚点的 URL，它应该可以正常工作：

site.com/item/id#comment-233

打开时，锚点将准确定位在页面顶部。

如何更改起点？假设我希望它是从顶部向下的50px。

我需要这个的原因是因为我在页面顶部有固定层，所以评论出现在固定标题div 后面重叠。

为了以防万一，由于跨浏览器合规性，我更喜欢不涉及将注释容器更改为固定和定位顶部减去标题高度的解决方案。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

假设您的 <a> 标签没有内容，请使用 position:relative; top:-50px; 向它添加一个类标签

根据您的文档，您还必须将其包装在绝对 <div> 中

如果实施正确，这应该是跨浏览器兼容的。

编辑

这是我在本地完成的测试，在 FF 3.6 中运行良好

<html>

    <body style='margin:0; padding:0;'>
        <div style='position:fixed; height:50px; background-color:#F00; width:100%'>
        Fixed header
        </div>
        <div style='padding-top:50px'>
            <div style='height:100px; margin-top:10px; background-color:#0F0'><a href='#linkhere'>Go to anchor</a></div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>
                <a name='linkhere' style='position:relative; top:-75px;'></a>
            Link here</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
            <div style='height:100px; margin-top:10px; background-color:#0F0'>Blah</div>
        </div>
    </body>
</html>

【讨论】：

它适用于 FF 3.6，但它不适用于 Safari 和 Chrome。
@Martin 添加了一个在 <a name='linkhere' style='position:relative; top:-75px;'>&nbsp;</a> 中，现在它适用于我的 chrome、ff 和 safari
就是这样。那个空间解释了所有的混乱。谢谢潮湿！
@Damp 它对我来说在 chrome 中不起作用。 <a name='linkhere' style='position:relative; top: -50px; visibility: hidden;'>anything</a> 为我工作。
@gfeezy 我刚刚尝试了我在 chrome 25 中发布的确切代码，它工作得很好......

【解决方案2】：

根据上述建议，这对我来说是一种享受：

<a name="[my-anchor-name]" class="anchor"></a>

.anchor {
    position:relative;
    top:-30px; /* or whatever value you need */
}

【讨论】：

【解决方案3】：

.anchor{
  display: block;
  height: 115px; <!--same height as header-->
  margin-top: -115px; <!--same height as header-->
  visibility: hidden;
}

<span class="anchor"></span>
<div>content...</div>

来自http://www.pixelflips.com/blog/anchor-links-with-a-fixed-header/

【讨论】：

这个回答很完美！

【解决方案4】：

添加“显示：块；”为我解决了：

<a name="[my-anchor-name]" class="anchor"></a>

.anchor {
    position:relative;
    top:-50px;
    display: block;
}

【讨论】：

【解决方案5】：

此代码也适用于 Firefox、Chrome、IE 和其他可能：

<a id="comment-3" class="shifted_anchor">&nbsp;</a>
<div>
    ... comment ...
</div>

这是样式表：

a.shifted_anchor {
  position: relative;
  top: -35px;
  margin: 0;
  padding: 0;
  float: left;
}

关键是float属性：我们使用它来避免&nbsp;引起的额外垂直空间，而这又是跨浏览器兼容性所必需的。

【讨论】：

我喜欢这个类名，但我可能不会在这里使用&npsp;。
float: left; 确实是诀窍！但是，不间断空格不是必需的（至少对于现代浏览器而言），也不应该使用。

【解决方案6】：

所以我在这里结合了几个想法，并提出了一个对我和所有浏览器都适用的想法。空锚似乎不适用于 webkit 浏览器，绝对不适用于 Chrome。向锚点添加伪元素可以解决此问题，而不会破坏布局。

a.anchor { position: relative; top: - $offsetHeight; visibility: hidden; }
a.anchor:before {
  content:"";
  float: left;
  height: 0px;
}

只需将$offsetHeight 替换为您需要的任何内容。

【讨论】：