我正在努力清理我的锚的工作方式。我有一个固定在页面顶部的标题，所以当你链接到页面其他地方的锚时，页面跳转，锚位于页面顶部，留下固定标题后面的内容(我希望这是有意义的)。我需要一种方法来抵消锚的25px从头部的高度。我更喜欢HTML或CSS，但Javascript也可以接受。
当前回答
这是我们在网站上使用的解决方案。调整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;
});
其他回答
你可以使用a[name]:not([href]) css选择器在没有ID的情况下实现这一点。这仅仅是查找有名称且没有href的链接，例如<a name="anc1"></a>
一个示例规则可能是:
a[name]:not([href]){
display: block;
position: relative;
top: -100px;
visibility: hidden;
}
对于同样的问题，我使用了一个简单的解决方案:在每个锚上放置40px的填充顶部。
我在每个h1元素之前添加了40px-height .vspace元素。
<div class="vspace" id="gherkin"></div>
<div class="page-header">
<h1>Gherkin</h1>
</div>
CSS中:
.vspace { height: 40px;}
它工作得很好，空间也没有堵塞。
我找到了这个解决方案:
<a name="myanchor">
<h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</a>
这不会在内容和锚链接中产生任何差距，效果非常好。
正如@moeffju所建议的，这可以通过CSS实现。我遇到的问题(我很惊讶我没有看到讨论)是用填充或透明边框重叠之前的元素的技巧，可以防止在这些部分的底部进行悬停和单击操作，因为下面的部分在z轴次序中更高。
我发现的最好的解决办法是把部分内容放在一个div，是在z-index: 1:
// Apply to elements that serve as anchors
.offset-anchor {
border-top: 75px solid transparent;
margin: -75px 0 0;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
// Because offset-anchor causes sections to overlap the bottom of previous ones,
// we need to put content higher so links aren't blocked by the transparent border.
.container {
position: relative;
z-index: 1;
}
