¿Activar el anclaje de URL pero no desplazarse hacia él?

Question

Tengo una página con dos pestañas que deseo poder cambiar con Javascript, pero también establezco el ancla (por ejemplo, page.html#tab1) en la URL para marcar/enlazar.

De forma predeterminada, los contenidos de las pestañas están en dos divisiones, una debajo de la otra, y la etiqueta de anclaje se desplazará a la correcta, con JS deshabilitado.

Con JS habilitado, las clases CSS se aplican para que actúen como pestañas. Cada pestaña se vincula a cada delimitador, pero cuando hace clic para cambiar de pestaña, la página se desplaza a la pestaña. Si devuelvo falso de la función onclick, la URL no cambia para incluir el anclaje.

¿Cómo hago para que la URL del navegador cambie a page.html#tab1 pero no se desplace al #tab1?

Answer 1

He jugado con esto por un tiempo, porque inicialmente no te creía (uso el jQuery history plugin para obtener un comportamiento similar).

Y estoy perplejo. No creo que puedas. Lo que podría hacer, como una solución, es use javascript to set the hash to something DIFFERENT from what is actually on the page. Y luego use javascript al cargar para leer el hash y completar el contenido correcto. I do this on my site. Entonces, en ese escenario, los usuarios sin javascript se desplazarían, los usuarios con javascript mantendrían la cadena de historial, y solo se vuelve loco cuando las personas sin enviar enlaces a personas con (o viceversa).

Answer 2

window.location.hash = 'tab1'; 

podría funcionar.

Answer 3

¿Podría tener algún Javascript que cambie los nombres de los ancla, configure window.location.hash, y luego cambie los nombres de los ancla?

(He confirmado que andynormancx tiene razón, y al establecer window.location.hash se desplaza la vista, pero soy demasiado flojo para probar si la creación de un ancla en el DOM para window.location.hash también se desplaza.)

Answer 4

var Namespace = { 
    var timer, scroll; 
} 

// Onclick 
Namespace.scroll = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; 
Namespace.timer = setInterval(function() { scrollTo(0, Namespace.scroll) }, 100); 
location.hash = this.href; 
clearInterval(Namespace.timer); 

Answer 5

Un truco rápido:

var thehash = e.target.hash; 
$(thehash).prop('id',thehash.substr(1)+'-noscroll'); 
window.location.hash = e.target.hash; 
$(thehash+'-noscroll').prop('id',thehash.substr(1));  

Esto cambia el id del elemento html antes y después de cambiar el hash de la URL. Funciona para mí, pero también podría romper algo. Esto evita que el navegador se desplace en un cambio de hash, ya que no hay un elemento html con ese id entre medio.