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