css - アンカーが正しくスクロールしない

Question

私は次のようなレイアウトを持っています:

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

私のバナーposition:fixed;はおおよそ200px高くなっています。

問題は、フラグメント識別子を持つリンクをクリックすると、ページがスクロールし、アンカー (識別子付き) がページの上部、バナーの下ではなく、バナーの後ろに表示されることです。

不足しているもの (CSS または jQuery) はありますか?

Answer 1

これはスクロールしすぎる Div アンカーの複製です

サンプル コードを表示するリクエストについては、ここに完全なサンプル ページを配置しました: https://gist.github.com/denised/5924370。

重要なのは、2 つの div (#header と #mainbody) と次の css (固定ヘッダーを作成するかなり標準的な方法だと思います) の存在です。

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

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