I apologize if this is not the right forum (couldn't decide if this is a js problem, or just css), and if it seems kind of basic. I have a site that seems quite simple but there is a page with a very long list on it. I wanted to be able to scroll the list up underneath the header information, which I've done using position:fixed for the header. Then I thought it would be better for the user to be able to jump through the list to different categories. I can't figure out how to get the scrolling to simply stop at the bottom of the header information. I've tried to implement scrollTo(), scrollTop(), but my js skills are limited at best. Any help would be most welcome. (Of course I'd also like to have this scroll nice and smoothly when going from one part of the list to another).

Right now it is coded with hash-tag links. And there is one instance where I manually placed the <a>tag where I wanted the scroll to stop. This is a bad work-around for if/when this list changes, obviously, I just wanted to see if I could make it work somehow or other.

I've posted a working version of the page here:

Thanks very much.