我正在努力清理我的锚的工作方式。我有一个固定在页面顶部的标题，所以当你链接到页面其他地方的锚时，页面跳转，锚位于页面顶部，留下固定标题后面的内容(我希望这是有意义的)。我需要一种方法来抵消锚的25px从头部的高度。我更喜欢HTML或CSS，但Javascript也可以接受。
当前回答
用可链接id来提供导航栏高度的隐藏span标签怎么样?
#head1 {
padding-top: 60px;
height: 0px;
visibility: hidden;
}
<span class="head1">somecontent</span>
<h5 id="headline1">This Headline is not obscured</h5>
这里是小提琴:http://jsfiddle.net/N6f2f/7
其他回答
你也可以用follow attr添加一个锚:
(text-indent:-99999px;)
visibility: hidden;
position:absolute;
top:-80px;
并给父容器一个相对的位置。
很适合我。
用可链接id来提供导航栏高度的隐藏span标签怎么样?
#head1 {
padding-top: 60px;
height: 0px;
visibility: hidden;
}
<span class="head1">somecontent</span>
<h5 id="headline1">This Headline is not obscured</h5>
这里是小提琴:http://jsfiddle.net/N6f2f/7
再加上Ziav的回答(感谢Alexander Savin)，我需要使用老式的<a name="…">…</a> as we're using <div id="…">…</div>用于代码中的另一个目的。我在使用display: inline-block时遇到了一些显示问题——每个<p>元素的第一行都略微右缩进(在Webkit和Firefox浏览器上都是如此)。我最终尝试了其他的显示值和display: table-标题对我来说非常适合。
.anchor {
padding-top: 60px;
margin-top: -60px;
display: table-caption;
}
这是我们在网站上使用的解决方案。调整headerHeight变量，无论你的头部高度是什么。将js-scroll类添加到应该在单击时滚动的锚。
// SCROLL ON CLICK
// --------------------------------------------------------------------------
$('.js-scroll').click(function(){
var headerHeight = 60;
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top - headerHeight
}, 500);
return false;
});
@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>
