我正在努力清理我的锚的工作方式。我有一个固定在页面顶部的标题,所以当你链接到页面其他地方的锚时,页面跳转,锚位于页面顶部,留下固定标题后面的内容(我希望这是有意义的)。我需要一种方法来抵消锚的25px从头部的高度。我更喜欢HTML或CSS,但Javascript也可以接受。
当前回答
@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>
其他回答
你可以不用js也不用修改html。它´s css-only。
a[id]::before {
content: '';
display: block;
height: 50px;
margin: -30px 0 0;
}
这将在每个带id的a-tag之前附加一个伪元素。调整值以匹配头部的高度。
不要使用固定位置的导航条,它覆盖了页面的其余内容(整个页面主体都是可滚动的),而是考虑使用静态导航条的不可滚动主体,然后将页面内容放在绝对位置的可滚动div中。
也就是说,有这样的HTML…
<div class="static-navbar">NAVBAR</div>
<div class="scrollable-content">
<p>Bla bla bla</p>
<p>Yadda yadda yadda</p>
<p>Mary had a little lamb</p>
<h2 id="stuff-i-want-to-link-to">Stuff</h2>
<p>More nonsense</p>
</div>
... 和CSS是这样的:
.static-navbar {
height: 100px;
}
.scrollable-content {
position: absolute;
top: 100px;
bottom: 0;
overflow-y: scroll;
width: 100%;
}
然而,这种方法有一个显著的缺点,那就是当页面标题中的元素被聚焦时,用户将无法使用键盘滚动页面(例如,通过向上和向下箭头或page up和page down键)。
下面是一个演示这个操作的JSFiddle。
用可链接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
从这个链接中给出的答案中借用一些代码(没有指定作者),你可以包括一个很好的平滑滚动效果到锚,同时让它停在锚上方的-60px处,很好地适合固定引导导航条的下方(需要jQuery):
$(".dropdown-menu a[href^='#']").on('click', function(e) {
// prevent default anchor click behavior
e.preventDefault();
// animate
$('html, body').animate({
scrollTop: $(this.hash).offset().top - 60
}, 300, function(){
});
});
对于现代浏览器,只需将CSS3:target选择器添加到页面。这将自动应用于所有的锚。
:target {
display: block;
position: relative;
top: -100px;
visibility: hidden;
}