Cargando con AJAX y anclando en contenido cargado

Estoy construyendo un sitio web para organizar colecciones de cómics.

Así que tiene a la izquierda una lista de sus cómics y si hace clic en uno de ellos, la página con los detalles sobre ese cómic se carga a la derecha con AJAX con la función load() jQuery.

No tengo una página para todos los cómics, sino para cada serie (una para todos los “Walking dead”, una para todos los “Spiderman” …), así que en cada página puede haber muchos cómics diferentes.

Sin embargo, al hacer clic en un cómic específico no solo quiero cargar la página correcta, sino también ir a la posición correcta en esta página.

Tengo anclas en cada página (# i12, # i13 con un número único cada vez).

¿Cómo puedo, después de cargar el contenido utilizando AJAX, ir al ancla correcta? Intenté modificar dinámicamente la URL de la página (agregando un # i12 al final) pero sin éxito.

Estaba usando document.location.hash , ¿mala idea?


Un ejemplo muy simple: al hacer clic en el enlace, la página se carga en el div y me gustaría que la página se desplace al ancla #i120

Pagina principal :

  

Javascript:

 $("a").live('click',function (event) { $("#Content").load(this.href); event.stopImmediatePropagation(); event.preventDefault(); }); 

Page Test.php:

 
Text1
... ...
Text120

Primero, eliminemos las ID no válidas, no pueden comenzar con un número hasta HTML5, prefijo sus ID con algo como id="nav1" .

Esa parte es la limpieza, lo que puedes hacer para el desplazamiento es esto:

 $("a").live('click', function(event) { var hash = this.hash; $("#Content").load(this.href, function() { document.location.hash = hash; }); event.stopImmediatePropagation(); event.preventDefault(); }); 

Se ejecutará una vez que se cargue el contenido, así que hay algo para desplazarse. Ese enfoque va instantáneamente allí, así que para animarlo … eso también es bastante fácil:

 $("a").live('click', function(event) { var hash = this.hash; $("#Content").load(this.href, function() { var st = $(hash).scrollTop(); $('html, body').animate({ scrollTop: st }, 200); //200ms duration }); event.stopImmediatePropagation(); event.preventDefault(); }); 

Estamos almacenando this.hash como una variable porque dentro de esa callback, this se referirá al elemento #Content , no al ancla en la que hicimos clic.

Jquery ScrollTo es probablemente tu mejor apuesta.

De lo contrario, sugeriría tener algunos enlaces invisibles en la página (como ) y luego, una vez que se complete el ajax y tenga el ID # que ejecuta:

 $("#link" + idnumber).click(); 

Sencillo, pero muy efectivo.