Change hash without reload in jQuery Change hash without reload in jQuery jquery jquery

Change hash without reload in jQuery


This works for me

$('ul.questions li a').click(function(event) {    event.preventDefault();    $('.tab').hide();    window.location.hash = this.hash;    $($(this).attr('href')).fadeIn('slow');});

Check here http://jsbin.com/edicu for a demo with almost identical code


You could try catching the onload event. And stopping the propagation dependent on some flag.

var changeHash = false;$('ul.questions li a').click(function(event) {    var $this = $(this)    $('.tab').hide();  //you can improve the speed of this selector.    $($this.attr('href')).fadeIn('slow');    StopEvent(event);  //notice I've changed this    changeHash = true;    window.location.hash = $this.attr('href');});$(window).onload(function(event){    if (changeHash){        changeHash = false;        StopEvent(event);    }}function StopEvent(event){    event.preventDefault();    event.stopPropagation();    if ($.browser.msie) {        event.originalEvent.keyCode = 0;        event.originalEvent.cancelBubble = true;        event.originalEvent.returnValue = false;    }}

Not tested, so can't say if it would work


The accepted answer didn't work for me as my page jumped slightly on click, messing up my scroll animation.

I decided to update the entire URL using window.history.replaceState rather than using the window.location.hash method. Thus circumventing the hashChange event fired by the browser.

// Only fire when URL has anchor$('a[href*="#"]:not([href="#"])').on('click', function(event) {    // Prevent default anchor handling (which causes the page-jumping)    event.preventDefault();    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 ) {                // Smooth scrolling to anchor            $('html, body').animate({                scrollTop: target.offset().top            }, 1000);            // Update URL            window.history.replaceState("", document.title, window.location.href.replace(location.hash, "") + this.hash);        }    }});