Fixed page header overlaps in-page anchors

Question

If I have a non-scrolling header in an HTML page, fixed to the top, having a defined height:

Is there a way to use the URL anchor (the #fragment part) t

Answer 1

I had a lot of trouble with many of the answers here and elsewhere as my bookmarked anchors were section headers in an FAQ page, so offsetting the header didn't help as the rest of the content would just stay where it was. So I thought I'd post.

What I ended up doing was a composite of a few solutions:

1. The CSS:

   .bookmark {
       margin-top:-120px;
       padding-bottom:120px; 
       display:block;
   }
   

Where "120px" is your fixed header height (maybe plus some margin).

2. The bookmark link HTML:

   What is your FAQ question again?
   

3. The bookmarked content HTML:

   
   What is your FAQ question again?
   Some FAQ text, followed by ...
   ... some more FAQ text, etc ...
   

The good thing about this solution is that the span element is not only hidden, it is essentially collapsed and doesn't pad out your content.

I can't take much credit for this solution as it comes from a swag of different resources, but it worked best for me in my situation.

You can see the actual result here.