Posso aggiornare window.location.hash senza scorrere la pagina Web?

Question

Usando JavaScript, c'è un modo per aggiornare window.location.hash senza scorrere la pagina web?

Ho elementi del titolo cliccabili che attivano la visibilità di un div direttamente sotto di loro. Voglio la barra / foo # nella cronologia quando faccio clic sui titoli ma non voglio che la pagina scorra. Quindi, quando mi allontano da / foo # bar, sarò in grado di usare il pulsante Indietro e avere il div il cui ID è in window.location.hash essere visibile al ritorno.

Questo comportamento è possibile?

Answer 1

Questo comportamento è molto possibile. Dovresti esaminare alcune delle librerie che sono state sviluppate per darti questa funzionalità.

Storia davvero semplice: http://code.google.com/p/reallysimplehistory/ Indirizzo SWF: http://www.asual.com/swfaddress/

Answer 2

Per cambiare l'hash senza dover ricaricare / scorrere la pagina, ora puoi semplicemente usare html5 history.pushState .

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

È supportato da tutti i principali browser:

http://caniuse.com/history

MDN:

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

Nota anche che l'ultimo parametro url che stiamo usando qui, può essere qualsiasi url, quindi non si limita agli hash.

Answer 3

Facile come si arriva

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

Answer 4

Un'altra cosa che potresti provare è cambiare temporaneamente l'id dell'elemento a cui punta l'hash. Ha funzionato per me!

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

Answer 5

Volevo aggiungere un commento alla risposta di Catherines ma non ho ancora il rappresentante -

Ottima soluzione, tuttavia per Chrome non funzionava come $ ('html'). scrollTop () restituisce sempre 0 - una modifica minore risolve il problema:

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

Answer 6

Basandomi sulla risposta di Sunny ho realizzato questa funzione che evita anche indefiniti e nulli:

    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;
            }
        }
    }