January 09, 2019
Working with CSS fixed headers and HTML anchor tags can be a little tricky. The jump point will need to be offset by the height of the header, and other fixed elements.
Anchor Tag
<a class="anchor_tag"></a>
CSS Offset (hidden content)
.anchor_tag {
display: block;
position: relative;
top: -5em;
visibility: hidden;
}
jQuery Offset (visible content)
var jQueryanchor = jQuery(':target'),
fixedElementHeight = 200;
if (jQueryanchor.length > 0) {
window.scrollTo(0, jQueryanchor.offset().top - fixedElementHeight);
}
};
jQuery(window).on('hashchange load', function() {
adjustAnchor();
});
})(jQuery, window);