我不确定询问/搜索这个问题的最佳方式：
当您单击锚链接时，它会将您带到页面的该部分，链接区域现在位于页面的顶部。我希望锚链接将我发送到页面的那部分，但我希望顶部有一些空间。就像，我不希望它把我发送到顶部的链接到部分，我希望那里有 100 个左右像素的空间。
这有意义吗？这可能吗？
编辑以显示代码 - 它只是一个锚标签：
<a href="#anchor">Click me!</a>
<p id="anchor">I should be 100px below where I currently am!</p>
window.addEventListener("hashchange", function () {
window.scrollTo(window.scrollX, window.scrollY - 100);
});
这将允许浏览器为我们完成跳转到锚点的工作，然后我们将使用该位置进行偏移。
编辑 1：
正如@erb 所指出的，这仅在更改哈希时您在页面上时才有效。使用#somethingURL 中已有的进入页面不适用于上述代码。这是处理该问题的另一个版本：
// The function actually applying the offset
function offsetAnchor() {
if(location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - 100);
}
}
// This will capture hash changes while on the page
window.addEventListener("hashchange", offsetAnchor);
// This is here so that when you enter the page with a hash,
// it can provide the offset in that case too. Having a timeout
// seems necessary to allow the browser to jump to the anchor first.
window.setTimeout(offsetAnchor, 1); // The delay of 1 is arbitrary and may not always work right (although it did in my testing).
注意：要使用 jQuery，您可以将示例中的window.addEventListenerwith替换为$(window).on。谢谢@Neon。
编辑2：
正如一些人指出的那样，如果您连续两次或多次单击同一个锚链接，上述操作将失败，因为没有hashchange事件强制偏移。
此解决方案是@Mave 建议的略微修改版本，并为简单起见使用了 jQuery 选择器
// The function actually applying the offset
function offsetAnchor() {
if (location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - 100);
}
}
// Captures click events of all <a> elements with href starting with #
$(document).on('click', 'a[href^="#"]', function(event) {
// Click events are captured before hashchanges. Timeout
// causes offsetAnchor to be called after the page jump.
window.setTimeout(function() {
offsetAnchor();
}, 0);
});
// Set the offset when entering page with hash present in the url
window.setTimeout(offsetAnchor, 0);
此示例的 JSFiddle在这里
仅使用 css 您可以向锚定元素添加填充（如上面的解决方案）为了避免不必要的空白，您可以添加相同高度的负边距：
#anchor {
padding-top: 50px;
margin-top: -50px;
}
我不确定这是否是任何情况下的最佳解决方案，但对我来说效果很好。
更好的解决方案：
<p style="position:relative;">
<a name="anchor" style="position:absolute; top:-100px;"></a>
I should be 100px below where I currently am!
</p>
只需在<a>相对定位的对象内使用绝对定位来定位标签。
在进入页面或通过页面内的哈希更改时有效。
最佳解决方案
<span class="anchor" id="section1"></span>
<div class="section"></div>
<span class="anchor" id="section2"></span>
<div class="section"></div>
<span class="anchor" id="section3"></span>
<div class="section"></div>
<style>
.anchor{
display: block;
height: 115px; /*same height as header*/
margin-top: -115px; /*same height as header*/
visibility: hidden;
}
</style>