使锚点链接在它链接到的位置上方的一些像素

2022-08-30 02:29:08

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

当您单击锚点链接时,它会将您带到页面的该部分,并且链接区域现在位于页面的最顶部。我希望锚点链接将我发送到页面的该部分,但我希望在顶部有一些空间。就像在里面一样,我不希望它把我送到链接的部分,在非常顶部,我想要100个左右的空间。

这有意义吗?这可能吗?

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

<a href="#anchor">Click me!</a>

<p id="anchor">I should be 100px below where I currently am!</p>

答案 1
window.addEventListener("hashchange", function () {
    window.scrollTo(window.scrollX, window.scrollY - 100);
});

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

编辑1:

正如@erb所指出的那样,这只有在更改哈希时在页面上时才有效。输入URL中已有的页面不适用于上述代码。这是另一个版本来处理这个问题:#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.addEventListener替换为$(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 在这里


答案 2

仅使用css,您可以向定位元素添加填充(如上面的解决方案所示)为了避免不必要的空格,您可以添加相同高度的负边距:

#anchor {
    padding-top: 50px;
    margin-top: -50px;
}

我不确定这是否是在任何情况下的最佳解决方案,但它对我来说很好。