超链接和片段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;
}

这是他们的演示的jsfiddle。

（我认为）这也将消除对html { padding-top: 38px; }