超链接和片段ID垂直偏移问题

Question

我的页面顶部是一个静态定位的菜单条，在滚动期间跟随屏幕。

使用片段链接时，滚动位置需要偏移菜单条的高度。如何才能实现这一目标？

<a href="#fragment">Go to fragment</a>
<div id="fragment">...</div>

html { padding-top: 38px; } /* Offset page to allow for menu strip */
.menu-strip { position: fixed; top: 0; right: 0; left: 0; height: 38px; }

是否可以通过简单的 CSS 更改来实现此目的？

否则，是否有一种通用方法可以在指定片段时将滚动偏移 200px？

Answer 1

您想要做的是处理您自己的哈希链接。一个好主意是将所有进行哈希链接的

a

分组。例如

$(".ahashlink").click( function() {

    var location = $(this).attr("href");
    var offset = $(location).offset().top;
    $("body").scrollTop(offset+38);
    return false;
});

这将滚动到正确的位置加上 38 个像素（顶栏的高度）。但是，这不会更改浏览器中的 URL 以包含正确的哈希值。这是因为一旦您有

window.location.hash = "#something"

那么您的窗口将自动滚动到该哈希。所以请记住这一点。

Answer 2

这篇旧文章有一个仅 HTML+CSS 的解决方案。

基本思想是使用 :before css 选择器在每个可链接元素之前插入一些隐藏内容以偏移它们：

<linked_elements>:before {
  display: block;
  content:" ";
  margin-top: -<offset>;
  height: <offset>;
  visibility: hidden;
}

这是他们的 demo 的 jsfiddle。

（我认为）这也将消除对

html { padding-top: 38px; }

的需要

Answer 3

您可以像这样设置

html

宽滚动填充顶部：

html {
  scroll-padding-top: 38px;
}