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) to have the browser scroll to a certain point in the page, but still respect the height of the fixed element without the help of JavaScript?

http://example.com/#bar 

 WRONG (but the common behavior):         CORRECT: +---------------------------------+      +---------------------------------+ | BAR///////////////////// header |      | //////////////////////// header | +---------------------------------+      +---------------------------------+ | Here is the rest of the Text    |      | BAR                             | | ...                             |      |                                 | | ...                             |      | Here is the rest of the Text    | | ...                             |      | ...                             | +---------------------------------+      +---------------------------------+ 

Answer 1

If you can’t or don’t want to set a new class, add a fixed-height ::before pseudo-element to the :target pseudo-class in CSS:

:target::before {   content: "";   display: block;   height: 60px; /* fixed header height*/   margin: -60px 0 0; /* negative fixed header height */ } 

Or scroll the page relative to :target with jQuery:

var offset = $(':target').offset(); var scrollto = offset.top - 60; // minus fixed header height $('html, body').animate({scrollTop:scrollto}, 0); 

Answer 2

I had the same problem. I solved it by adding a class to the anchor element with the topbar height as the padding-top value.

<h1><a class="anchor" name="barlink">Bar</a></h1> 

I used this CSS:

.anchor { padding-top: 90px; }