How do I avoid anchor links from displaying behind and absolute positioned header?

Question

I have a page with an absolute positioned header that has: a logo, anchor links to portions of a table, and table headers. Content is the rest of a table. Scrolling affects only the table content then. I CSS'd it so the scroll bar is the height of the whole page, including the absolute positioned header. However, when I click an anchor link, it scrolls to display the section up top behind the header at the top of the page.

See for yourself here: http://www.surgpath4u.com/syndromes

Any ideas on how to make the anchor links display to below the header. I know I can make the content div separate from the header, but then the vertical scroll bars are not the height of the entire page, something I really want. The section ids are in tr tags.

Stumped. Any thoughts?

Answer 1

Did it.

Used jquery ScrollTo plugin and used the offset feature set to the height of the . For example, to go to , I use:

<a href="#" onclick="$.scrollTo( '#F', 1000, {offset: $('#head').height()*-1, easing:\'elasout\' } );">  

The easing gives a nice animated look too. Works well and with the offset feature, I can change browser window sizes and it still works well.

Hope this helps someone.