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 only solution。

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

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

以下是jsfiddle的demo。

这也（我认为）不再需要html { padding-top: 38px; }

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

2 个答案: