使锚链接在链接到的位置上方一些像素 [英] Make anchor link go some pixels above where it's linked to

问题描述

我不确定询问/搜索这个问题的最佳方式:

I'm not sure the best way to ask/search for this question:

当您单击锚链接时，它会将您带到页面的该部分，链接区域现在位于页面的顶部.我希望锚链接将我发送到页面的那部分，但我希望顶部有一些空间.比如，我不希望它把我发送到顶部的链接到部分，我希望那里有 100 像素左右的空间.

When you click on an anchor link, it brings you to that section of the page with the linked-to area now at the VERY TOP of the page. I would like the anchor link to send me to that part of the page, but I would like some space at the top. As in, I don't want it to send me to the linked-to part with it at the VERY TOP, I would like 100 or so pixels of space there.

这有意义吗?这可能吗?

Does this make sense? Is this possible?

编辑以显示代码 - 它只是一个锚标记:

Edited to show code - it's just an anchor tag:

<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);
});

这将允许浏览器为我们完成跳转到锚点的工作，然后我们将使用该位置进行偏移.

This will allow the browser to do the work of jumping to the anchor for us and then we will use that position to offset from.

编辑 1:

正如@erb 所指出的，这仅在哈希更改时您在页面上时才有效.使用 URL 中已有的 #something 进入页面不适用于上述代码.这是处理该问题的另一个版本:

As was pointed out by @erb, this only works if you are on the page while the hash is changed. Entering the page with a #something already in the URL does not work with the above code. Here is another version to handle that:

// 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.addEventListener 替换为 $(window).on.谢谢@Neon.

NOTE: To use jQuery, you could just replace window.addEventListener with $(window).on in the examples. Thanks @Neon.

编辑 2:

正如一些人所指出的，如果您连续两次或多次单击同一个锚链接，上述操作将失败，因为没有 hashchange 事件来强制偏移.

As pointed out by a few, the above will fail if you click on the same anchor link two or more times in a row because there is no hashchange event to force the offset.

这个解决方案是@Mave 建议的略微修改版本，为了简单起见使用了 jQuery 选择器

This solution is very slightly modified version of the suggestion from @Mave and uses jQuery selectors for simplicity

// 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是这里

JSFiddle for this example is here

这篇关于使锚链接在链接到的位置上方一些像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！