¿Puedo actualizar window.location.hash sin tener que desplazar la página web?

Question

Usando JavaScript, ¿hay alguna manera de actualizar window.location.hash sin desplazarse por la página web?

Tengo elementos de título en los que se puede hacer clic que alternan la visibilidad de un div directamente debajo de ellos. Quiero la barra / foo # en el historial al hacer clic en los títulos, pero no quiero que la página se desplace. Entonces, cuando navegue fuera de / foo # bar, podré usar el botón Atrás y hacer que el div cuyo ID está en window.location.hash esté visible al regresar.

¿Es posible este comportamiento?

Answer 1

Este comportamiento es muy posible. Debería buscar en algunas de las bibliotecas que se han desarrollado para brindarle esta funcionalidad.

Historia realmente simple: http://code.google.com/p/reallysimplehistory/ SWFAddress: http://www.asual.com/swfaddress/

Answer 2

Para cambiar el hash sin que la página se vuelva a cargar / desplazar, ahora simplemente puede usar html5 history.pushState .

history.pushState(null,null,'#hashexample');

Es compatible con todos los principales navegadores:

http://caniuse.com/history

MDN:

https: //developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#The_pushState().C2.A0method

También tenga en cuenta que el último parámetro de url que estamos usando aquí, puede ser cualquier url, por lo que no se limita a hashes.

Answer 3

Tan fácil como sea

var scrollmem = $('html,body').scrollTop();
window.location.hash = hash;
$('html,body').scrollTop(scrollmem);

Answer 4

Otra cosa que podría intentar es cambiar la identificación del elemento al que apunta el hash temporalmente. ¡Trabajó para mí!

function changeHashWithoutScrolling(hash) {
  var id = hash.replace(/^.*#/, ''),
      elem = document.getElementById(id)
  elem.id = id+'-tmp'
  window.location.hash = hash
  elem.id = id
}

Answer 5

Quería agregar un comentario a la respuesta de Catherines pero aún no tengo el representante -

Gran solución, sin embargo, no me funcionaba en Chrome ya que $ ('html'). scrollTop () siempre devuelve 0: una edición menor resuelve el problema:

scrollmem = $('html').scrollTop() || $('body').scrollTop();
window.location.hash = hash;
$('html,body').scrollTop(scrollmem);

Answer 6

Basándose en la respuesta de Sunny, hice esta función que también evita indefinidos y nulos:

    function changeHashWithoutScrolling(hash) {
        var id;
        var elem;

        id = hash.replace(/^.*#/, '');

        if (id) {
            elem = document.getElementById(id);

            if (elem) {
                elem.id = id + '-tmp';
                window.location.hash = hash;
                elem.id = id;
            }
        }
    }