Question

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

site.com/item/id#comment-233

打开时，锚点将位于页面顶部。

如何更改起点？假设我希望它从顶部开始50px。

我需要这个的原因是因为我在页面顶部有固定的图层，因此注释显示在固定标题div后面。

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

Answer 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>

Answer 2

根据上述建议，这对我有用：

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

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

Answer 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/

Answer 4

添加“display：block;”为我工作：

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

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

Answer 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属性：我们使用它来避免由 引起的额外垂直空间，而这又是跨浏览器兼容性所必需的。

Answer 6

所以我在这里结合了一些想法，并提出了一个适合我和所有浏览器的想法。空锚无法与webkit浏览器一起使用，绝对不能在Chrome上运行。向锚点添加一个伪元素可以在不破坏布局的情况下修复此问题。

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

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

更改#anchor的默认起始位置

6 个答案: