Question

In the code below when the anchor element is clicked I am trying to update the url with the anchor’s ‘href’ and scroll down to the relevant ‘id’:

jQuery(document).ready(function($) {
(function() {
    function update_url(id, url, scroll) {
            this.id = id;
            this.url = url;
            this.scroll = scroll;
            this.update();
    }

    update_url.prototype.update = function() {
        var url = this.url;
        $(this.id).click(function() {
            var append = $(this).attr('href');
            testing.scrollTo();
            document.location.href = url + append;
            return false;
        });
    }

    update_url.prototype.scrollTo = function() {
        $('html,body').animate({
            scrollTop: $("#" + this.scroll).offset().top
        },'slow');
    }

    var testing = new update_url('a', document.URL, 'people');  
    })(); });

The problem is when you click the anchor the return false; doesn’t kick in quick enough so the page jerks for a second before scrolling down.

Is there a way of updating the page’s url and still avoiding this jerky movement?

Answer 1

The problem is not that the return false; is triggered too late, but rather that the change you make to document.location.href causes the page reload no matter what.

• HTML5 pushState is what you’re looking for. If you’re using HTML5, that is.
• If not, you’ll want to resort to hash navigation.

There’s also a plugin for that, of course. It supports pushState as well as hash navigation – one less thing for you to worry about.