offsetting an html anchor to adjust for fixed header

Question

I am trying to clean up the way my anchors work. I have a header that is fixed to the top of the page, so when you link to an anchor elsewhere in the page, the page jumps so the anchor is at the top of the page, leaving the content behind the fixed header (I hope that makes sense). I need a way to offset the anchor by the 25px from the height of the header. I would prefer HTML or CSS, but Javascript would be acceptable as well.

Answer 1

Try using the CSS without any javascript.

Give your anchor tag a class selector like this:

<a class="anchor" id="top"></a>

Now, you can position the anchor tag an offset higher or lower than where it actually appears on the page, by making it a block element and relatively positioning it. Assigning top value as -250px will position the anchor up 250px.

a.anchor {

    display: block;

    position: relative;

    top: -250px;

    visibility: hidden;

}