Offset an HTML anchor to adjust for fixed header

September 18, 2017 8:01 pm by ATS Staff

Following code shows how to offset HTML anchor to adjust for fixed header. So that the link jumps to to the exact location of the page with fixed header. Considering that the height of the header is about 150 pixels.

<style>
a.anchor {
    top: -150px;
    display: block;
    position: relative;
    visibility: hidden;
}
</style>

<a href="#product">Product Info</a>
.
Some HTML Content
.
<a class="anchor" id="product"></a>