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);

YOU ARE AWESOME

thank you and have a great day

AWESOME INDEED. Thanks!

Thanks so much for sharing this! Fantastic function :)

Hi :)

My site is keep jumping up an down??
Can you help?

Site: http://speakersclub.dk/event-kursus/pre-netvaerksmoede-for-deltagere-til-elevate2015/

My js code: http://rebornincorporated.com/share/2015-10-18_01-14-39.png

Thanks a lot!
Kevin :)

Great solution, just thought I'd share this with you all: if it doesn't work, just comment the # signs in the first line of the function. OR replace this:
$('a[href*=#]:not([href=#])').click(function()
with this:
$("a[href*=\\#]:not([href=\\#])").click(function()

For Scroll to anchor on page load

function scrollToAnchor(hash) {
    var target = $(hash),
        headerHeight = $(".navbar-fixed-top").height() + 5; // Get fixed header height

    target = target.length ? target : $('[name=' + hash.slice(1) +']');

    if (target.length)
    {
        $('html,body').animate({
            scrollTop: target.offset().top - headerHeight
        }, 100);
        return false;
    }
}

if(window.location.hash) {
    scrollToAnchor(window.location.hash);
}


$("a[href*=\\#]:not([href=\\#])").click(function()
{
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        || location.hostname == this.hostname)
    {

        scrollToAnchor(this.hash);
    }
});

This is working great for href="#zyz" links, but not for href="/abc#zyz" - why not?

Awesome! Thank you so much 👍

@biwerr - your code work very well, but could you explain you code? I like understand how it work

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