Anchor Offset for Fixed Header (with Scroll)

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.

Leave a Reply

katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.