css - 锚无法正确滚动

Question

我的布局类似于：

<div class="banner"></div>
<div class="content"></div>

我的横幅已经position:fixed;并且大致200px很高。

问题是，当我单击带有片段标识符的链接时，页面滚动并且锚点（带有标识符）位于页面顶部，位于横幅后面，而不是可以看到的横幅下方。

我缺少什么（CSS 或 jQuery）吗？

Answer 1

这是Div 锚点滚动太远的重复

对于查看示例代码的请求，我在此处放置了一个完整的示例页面： https ://gist.github.com/denised/5924370 。

关键位是存在两个 div（#header 和 #mainbody）和下面的 css 位（我认为这是创建固定标头的一种相当标准的方法）：

#header {
  position:fixed; 
  left:0; right:0; top:0;
  background-color: #F0F0E8;
  z-index:2;
}

#mainbody { 
  position: absolute;
  top: 150px;
}