HoundstoothSTL/anchor-scroll-with-offset.js

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