Anchor scroll with fixed header offset

anchor-scroll-with-offset.js

(function($) {
  $('a[href*=#]:not([href=#])').click(function() 
  {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) 
    {
      
      var target = $(this.hash),
      headerHeight = $(".primary-header").height() + 5; // Get fixed header height
            
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
              
      if (target.length) 
      {
        $('html,body').animate({
          scrollTop: target.offset().top - headerHeight
        }, 500);
        return false;
      }
    }
  });
})(jQuery);

Many, many thanks for this!

Just recently noticed this script error on my site --

Syntax error, unrecognized expression: a[href*=#]:not([href=#])

The quick update for line 2 in this gist is:

$('a[href*=\\#]:not([href=\\#])').click(function()

I personally don't think this is an efficient way!
Better know the height of header and do add the following in your css
.offset{margin-top: -5em !important; padding-top: 5em !important;} and add the class offset to the desired html element.

NB: Obviously change 5em to your header height!!

Thank you,
But you could simply replace target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); by target = $(this).attr('href');

Anyway, it works for me