使锚点链接转到它所链接到的某个像素上方
我不确定询问/搜索这个问题的最佳方式：
当您点击一个锚点链接时，它会将您带到页面的该部分，并且现在链接区域位于页面的非常顶部。 我希望锚链接将我发送到页面的那一部分，但我希望顶部有一些空间。 就像在里面，我不希望它把它发送到链接到的部分，在那里我非常喜欢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指出的那样，只有当你在页面上而哈希被改变时，这才起作用。 使用上面的代码无法使用网址中已有的#something输入网页。 这是另一个版本来处理：
// 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).on替换window.addEventListener 。 谢谢@ 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>标签放置在相对定位的对象内。
进入页面或通过页面内的散列更改时可用。
链接地址: http://www.djcxy.com/p/88975.html上一篇: Make anchor link go some pixels above where it's linked to