Offsetting Anchor Links with Fixed Header
css, header, html, jquery
Solution
You could include `padding-top` and then use negative `margin-top` to balance it out.
jsFiddle
h2 {
padding-top: 70px;
margin-top: -70px;
}
Problem
There've been a few similar posts (offsetting an html anchor to adjust for fixed header, for example), but those solution doesn't work for my particular case. I am using jQuery to populate a Table of Contents, specifically the method described here: http://css-tricks.com/automatic-table-of-contents/. It searches for the h2 tags within the article, and then creates anchors links. The problem is I'm using a fixed header. When I click on one of these anchor links, the target h2 is underneath the header. One temporary solution I'm using is: ``` h2:target{ padding-top:[header-height]; } ``` This works until you scroll back up, and there's a huge gap in the middle of the content. Do y'all have any ideas on how I can offset these anchor links to account for the header? I'd like to keep the HTML as semantic as possible. Any help would be appreciated. Here's a jsFiddle of what exactly I'm talking about: http://jsfiddle.net/aweber9/GbNFv/ Thanks.