Question

I am using this code to smoothly scroll between anchors on a page as a progressive enhancement

$('a[href*=#]').click(function(e) {
    if (location.pathname.replace('/^\//','') == this.pathname.replace('/^\//','')
        && location.hostname == this.hostname) {
        var $target = $(this.hash);
        $target = $target.length && $target
            || $('[name=' + this.hash.slice(1) +']');
        if ($target.length) {
            $('.active').removeClass('active');
            $(this).parent().addClass('active');
            var targetOffset = $target.offset().top;
            $('html,body')
            .animate({
                scrollTop: targetOffset
            }, 750);
            e.preventDefault();
            //location.hash = $(this.hash);
        }
    }
});

My question is, is there a way to update the URL in the browser like normal, but still get a smooth scroll? If I uncomment the last line, it will jump to the anchor and then do the animate.

Answer 1

I just solved it as I posted. Posting this to help others.
Basically, I just used the callback on completion of the animate to update the browser location.

$('a[href*=#]').click(function(e) {
    if (location.pathname.replace('/^\//','') == this.pathname.replace('/^\//','')
        && location.hostname == this.hostname) {
        var hash = this.hash;
        var $target = $(this.hash);
        $target = $target.length && $target
            || $('[name=' + this.hash.slice(1) +']');
        if ($target.length) {
            $('.active').removeClass('active');
            $(this).parent().addClass('active');
            var targetOffset = $target.offset().top;
            $('html,body')
            .animate({
                scrollTop: targetOffset
            }, 750, function() {
                location.hash = hash;
            });
            e.preventDefault();

        }
    }