Insertar clase en elemento a partir de hashtag en URL

[JUMASOL]

Buenas tardes.

En una página he establecido un sistema de enlaces hacia zonas inferiores con anclas muy común en secciones legales, mapas del sitio, etc.

Cuando pulso uno de los enlaces la página hace el scroll correspondiente hasta el ancla:

Código:

<a id="este-ancla"></a>

Una vez que tengo un hashtag en la URL quiero una clase en un elemento determinado:

El hash de ejemplo #este-hash

El elemento en el html, donde quiero que se inserte la clase "active", es la h1 "esta-clase".

Código:

  <div class="heading">
    <h1 class="esta-clase">Prueba</h1>
  </div>

Con este javascript se consigue a partir de la detección del hashtag.

Código:

$(function(){
if ( window.location.hash == "#este-ancla" ) {

        $(".esta-clase").addClass("active");

    } 
});

El problema es que no inserta la clase si no refrescas el navegador, porque claro, la página sigue siendo la misma, es decir, no ha cambiado de sitio, el navegador no se ha refrescado al pasar a otra página.

Si me explico.

¿Es posible solucionarlo?

He intentado un refrescado automático, pero se produce un bucle sin fin.

No sé si se os ocurre otra cosa.

[carlillos]

Es que tu script se está ejecutando sólo una vez cuando se carga la página, lo que tendrías que hacer sería también ejecutarlo cuando se produzca un evento de clic en tus enlaces.

[Alexis88]

Para detectar el cambio, utiliza el evento popstate.

Código Javascript:

window.addEventListener("popstate", function(){
    //Instrucciones
}, false);
 

Un saludo