Adding an automatic offset to the scroll position for all hash-links/calls

I actually found a solution myself that worked for me, using only css:

I added a margin-top: -40px; and padding-top: 40px; to the element that the jump-link was pointing to. This works for all major browsers: IE (7-9), Firefox, Opera, Chrome and Safari.

Only problem: In case that this element is after a floated element, the negative margin doesn't work (meaning the positive padding becomes visible). Please comment, if anyone knows a solution/workaround for this. I'll update my post then. Thank you!

I found this way of adding a :before in the css seems to work well.

h2:before {   display: block;   content: " ";   margin-top: -285px;   height: 285px;   visibility: hidden; }

More at CSS Tricks website

As an example consider D's bootDoc solution that works in all major browsers:

CSS (insert your titlebar height instead of 40px):

.symbol-target {    padding-top: 40px;    margin-top: -40px;    width: 1px; /* '0' will not work for Opera */    display: inline-block;}

HTML:

<h3>    <span class="symbol-target" id="myTarget"> </span>    <a href="#myTarget">My text</a></h3>

Real page example:

std.array.uninitializedArray documentation using bootDoc

Note:

It doesn't work for IE 6.