¿Cómo puedo saber si una página saltó al ancla (#) en javascript?

Question

Tengo algunos javascript que pueden aparecer en muchas páginas diferentes. Algunas veces se ha accedido a esas páginas a través de una URL que contiene una referencia de anclaje (# comment-100, por ejemplo). En esos casos, quiero que javascript demore la ejecución hasta que la ventana haya saltado. En este momento estoy usando un retraso, pero es bastante hackish y obviamente no funciona en todos los casos. Parece que no puedo encontrar ningún tipo de evento DOM que corresponda a la ventana "saltar".

Aparte de la simple demora, la única solución que he encontrado es hacer que el JS busque el ancla en la URL y, si encuentra una, ver los cambios en scrollTop. Pero parece fallar, y no estoy 100% seguro de que mi script siempre se dispare antes de que ocurra el desplazamiento, por lo que solo se ejecutará si el usuario desplaza manualmente la página. De todos modos, realmente no me gusta la solución y preferiría algo más impulsado por el evento. ¿Alguna sugerencia?

Editar para aclarar:

No estoy tratando de detectar un cambio de hash. Tomemos el siguiente ejemplo:

1. página index.php contiene un enlace a post.php # comment-1
2. usuario hace clic en el enlace a post.php # comment-1
3. post.php # comentario- 1
cargas
4. $ (document) incendios ready
5. No mucho más tarde, los rollos del navegador hacia abajo a # comment-1

estoy tratando de detectar de forma fiable cuando ocurre el paso 5.

Answer 1

Parece que podría usar window.onscroll. Probé este código ahora:

<a name="end" /> 
<script type="text/javascript"> 
    window.onscroll = function (e) { 
     alert("scrolled"); 
} 
</script> 

que parece funcionar.

Editar: Hm, no funciona en IE8. Sin embargo, funciona tanto en Firefox como en Chrome.

Editar: jQuery tiene un controlador .scroll(), pero se dispara antes de desplazarse en IE y no parece funcionar para Chrome o Firefox.

Answer 2

Puede marcar window.onhashchange en los navegadores modernos. Si quieres cross compatible, echa un vistazo a http://benalman.com/projects/jquery-hashchange-plugin/

Esta página tiene más información sobre window.onhashchange también.

EDIT: Es, básicamente, reemplaza todos los nombres de vínculos con una convención de enlace similar, y luego usar .scrollTo para garantizar el desplazamiento:

$(document).ready(function() { 
    // replace # with #_ in all links containing # 
    $('a[href*=#]').each(function() { 
     $(this).attr('href', $(this).attr('href').replace('#', '#_')); 
    }); 

    // scrollTo if #_ found 
    hashname = window.location.hash.replace('#_', ''); 
    // find element to scroll to (<a name=""> or anything with particular id) 
    elem = $('a[name="' + hashname + '"],#' + hashname); 

    if(elem) { 
     $(document).scrollTo(elem, 800,{onAfter:function(){ 
     //put after scroll code here }}); 
    } 
}); 

Ver jQuery: Scroll to anchor when calling URL, replace browsers behaviour para obtener más información.

Answer 3

para detectar cuando aparezca el elemento de la pantalla, utilice el appear plugin:

$('#comment-1').appear(function() { 
    $(this).text('scrolled'); 
});