偏移一个HTML锚来调整固定的头

我正在努力清理我的锚的工作方式。我有一个固定在页面顶部的标题，所以当你链接到页面其他地方的锚时，页面跳转，锚位于页面顶部，留下固定标题后面的内容(我希望这是有意义的)。我需要一种方法来抵消锚的25px从头部的高度。我更喜欢HTML或CSS，但Javascript也可以接受。

当前回答

我找到了这个解决方案:

<a name="myanchor">
    <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</a>

这不会在内容和锚链接中产生任何差距，效果非常好。

其他回答

你可以只使用CSS而不需要任何javascript。

给你的锚一个类:

<a class="anchor" id="top"></a>

然后，通过将锚定位为块元素并相对定位，您可以将锚定位在比它在页面上实际出现的位置更高或更低的偏移量。-250px将锚点向上定位250px

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

你可以使用a[name]:not([href]) css选择器在没有ID的情况下实现这一点。这仅仅是查找有名称且没有href的链接，例如<a name="anc1"></a>

一个示例规则可能是:

a[name]:not([href]){
    display: block;    
    position: relative;     
    top: -100px;
    visibility: hidden;
}

我遇到了同样的问题，最终手动处理点击事件，如下所示:

$('#mynav a').click(() ->
  $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top - 40
  }, 200
  return false
)

当然，滚动动画是可选的。

对于现代浏览器，只需将CSS3:target选择器添加到页面。这将自动应用于所有的锚。

:target {
    display: block;    
    position: relative;     
    top: -100px;
    visibility: hidden;
}

@AlexanderSavin的解决方案在WebKit浏览器中对我来说很棒。

另外，我不得不使用:target伪类，它将样式应用到选定的锚来调整FF, Opera和IE9中的填充:

a:target {
  padding-top: 40px
}

注意，这种风格不适合Chrome / Safari，所以你可能不得不使用css-hacks，条件注释等。

我还想注意到，Alexander的解决方案工作，因为目标元素是内联的。如果你不想要链接，你可以简单地改变显示属性:

<div id="myanchor" style="display: inline">
   <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</div>

推荐文章