Anchor Offset for Fixed Header (with Scroll)

May 13, 2020

A fixed header can cause auto-scroll content to be covered. Use this function to offset the scroll to the height of the fixed container.

REL.init = function() {
	
	jQuery(window).on('hashchange load', function() {
            REL.adjustAnchor();
        });
	
}

REL.adjustAnchor = function() {

    var jQueryanchor = jQuery(':target'),
            fixedElementHeight = jQuery('#masthead').outerHeight(); // change to ID or Class of fixed header

    if (jQueryanchor.length > 0) {

        jQuery('html, body')
            .stop()
            .animate({
                scrollTop: jQueryanchor.offset().top - fixedElementHeight
            }, 200);

    }

}

Source.