Cambio de hash sin recarga en jQuery

Question

tengo el siguiente código:

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

Esto simplemente se desvanece un div en función de cuándo se hace clic, pero quiero la etiqueta URL de la página de hash para cambiar al hacer clic en que la gente pueda copiar y marcarlo como favorito Por el momento, esto efectivamente recarga la página cuando se cambia la etiqueta hash.

¿Es posible cambiar la etiqueta hash y no volver a cargar la página para evitar el efecto de salto?

Answer 1

Esto funciona para mí

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

Marque aquí http://jsbin.com/edicu para un demo con código casi idéntica

Answer 2

Puede intentar detectar el evento onload. Y detener la propagación depende de alguna bandera.

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

No

a prueba, por lo que no se puede decir si funcionaría

Answer 3

El aceptada La respuesta no funcionó porque mi página saltó ligeramente al hacer clic, arruinando mi animación de desplazamiento.

Decidí actualizar la URL completa usando window.history.replaceState en lugar de usar el método window.location.hash. Evitando así el evento hashChange activado por el navegador.

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