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

Question

我不确定询问/搜索此问题的最佳方式：

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

这有意义吗？这可能吗？

编辑显示代码 - 它只是一个锚标签：

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

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

原文由 damon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 。谢谢@霓虹灯。

编辑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 在这里

原文由 Eric Olson 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于我认为与锚链接目标的滚动位置基本相同的问题，我找到了一个令人惊讶的解决方案。

我有一个页面，它显示一个带有子部分的长文档，我通过在它们正上方放置一个书签 dom 元素来标记其标题，如下所示：

 <div class = "TB_BookMark"
        id = "someId"
></div>
<h3 class="TB">Section 1</h3>

这个想法是用户可以通过单击侧窗格中的链接导航到文档的子部分。第一个这样的链接应该将窗口滚动到页面的开头。请注意，上面的书签 div 的内容是空的，这意味着它不应该占用页面空间，因此导航到第一个链接应该导航到页面的开头。

问题是单击第一个链接会滚动页面，因此第一个部分标题立即位于可见区域的顶部，其上方没有空格。换句话说，页面从顶部向下滚动了一点。而当页面被加载或重新加载时，（并且应该）在第一个部分标题上方有一个可见的空白边距。

我相信这与原始问题描述的问题相同。似乎没有办法让第一个链接滚动到页面的最开头。

问题是您在加载页面时看到的与单击第一个链接时看到的不同。当第一个标题上方不再有空白边距时，它看起来不太好，或者当您加载或重新加载页面时边距太大。

我让它工作的方式是这个CSS：

 .TB_Bookmark
{ border:solid 0px    Transparent;  /* Does NOT do what I want. */
  border:solid 0.01px Transparent;  /* Does what I want. */
}

h3.TB
{ margin-top:12px;
  margin-bottom:12px;
}

body
{ margin-top: 0px;
}

除了我留下的第一个边界定义作为不起作用的例子之外，以上所有内容都是让它工作的必要条件。第二个边界定义当然会覆盖第一个并因此生效。

为什么“边框：实心0.01px；”有效，但“边框：实心 0px；”不是我不明白。 0和0.01之间应该没有很大的区别吗？该解决方案适用于 Chrome 和 Firefox，如果我使用“border:solid 0px;”，则两者都停止工作。

原文由 Panu Logic 发布，翻译遵循 CC BY-SA 4.0 许可协议