我正在努力清理我的锚的工作方式。我有一个固定在页面顶部的标题，所以当你链接到页面其他地方的锚时，页面跳转，锚位于页面顶部，留下固定标题后面的内容(我希望这是有意义的)。我需要一种方法来抵消锚的25px从头部的高度。我更喜欢HTML或CSS，但Javascript也可以接受。
当前回答
我在每个h1元素之前添加了40px-height .vspace元素。
<div class="vspace" id="gherkin"></div>
<div class="page-header">
<h1>Gherkin</h1>
</div>
CSS中:
.vspace { height: 40px;}
它工作得很好，空间也没有堵塞。
其他回答
正如@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;
}
你可以只使用CSS而不需要任何javascript。
给你的锚一个类:
<a class="anchor" id="top"></a>
然后，通过将锚定位为块元素并相对定位，您可以将锚定位在比它在页面上实际出现的位置更高或更低的偏移量。-250px将锚点向上定位250px
a.anchor {
display: block;
position: relative;
top: -250px;
visibility: hidden;
}
我的解决方案结合了CMS的目标和前选择器。其他技术不考虑锚中的文本。调整高度和负边距到你需要的偏移量…
:target::before {
content: '';
display: block;
height: 180px;
margin-top: -180px;
}
你可以不用js也不用修改html。它´s css-only。
a[id]::before {
content: '';
display: block;
height: 50px;
margin: -30px 0 0;
}
这将在每个带id的a-tag之前附加一个伪元素。调整值以匹配头部的高度。
我在一个TYPO3网站上遇到了这个问题，其中所有的“内容元素”都用类似这样的东西包装:
<div id="c1234" class="contentElement">...</div>
我改变了渲染，所以它是这样渲染的:
<div id="c1234" class="anchor"></div>
<div class="contentElement">...</div>
这个CSS:
.anchor{
position: relative;
top: -50px;
}
固定的topbar是40px高，现在锚再次工作，并在topbar下10px开始。
这种技术的唯一缺点是你不能再使用:target。
