Anchor not scrolling correctly

I have a layout something along the lines of :

<div class="banner"></开发者_如何学JAVAdiv>
<div class="content"></div>

My banner has position:fixed; and is roughly 200px high.

The problem is that when I click a link with a fragment identifier, the page scrolls and the anchor (with the identifier) sits at the top of the page, behind the banner instead of under the banner where it can be seen.

Is there something (CSS or jQuery) that I am missing ?

This is a dup of Div anchors scrolling too far

For the requests to see sample code, I've put a full sample page here: https://gist.github.com/denised/5924370.

The key bit is the presence of two divs (#header and #mainbody) and the following bit of css (which I believe is a fairly standard way to create a fixed header):

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

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