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

在我的页面顶部是一个静态位置的菜单条，它在滚动期间跟随着屏幕。超链接和片段ID垂直偏移问题

使用片段链接时，滚动位置需要被菜单条的高度所偏移。这怎么能实现？

<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？

来源

2011-07-16 Lea Hayes

我不明白的问题，什么是“片段连接”的需要？ – vinceh

很难描绘出你所描述的内容。 @vinceh我认为他的意思是散列链接。 –

@vinceh它是当你链接到页面的特定部分。 Web浏览器跳转到具有在URI片段中指定的ID的元素。 uri片段是散列之后的部分。 –

你想要做的就是处理你自己的散列链接。一个好主意是将所有你做的散列链接的a分组。例如

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

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

这将滚动到正确的位置PLUS增加38个像素（顶栏的高度）。但是，这不会改变您的浏览器中的URL以包含正确的散列。这是因为一旦你有window.location.hash = "#something"，那么你的窗口将自动滚动到该散列。所以记住这一点。

来源

2011-07-16 05:46:10 vinceh

感谢您的回复。这也需要在页面之间工作，因此需要在页面加载时触发。我很惊讶，当浏览器不能自动偏移'html {margin-top：38px; }'被使用，但我想这是一个相当罕见的要求。再次感谢 –

这篇旧文章有一个HTML+CSS only solution。

的基本思想是利用:before css selector插入一些隐藏的内容每个可连结的元素之前，以抵消他们：

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

这里是他们的demo的jsfiddle。

这也将（我认为）带走html { padding-top: 38px; }

来源

2015-08-04 11:54:18 dougcosine

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

回答

相关问题