Kann ich ohne die Web-Seite blättern aktualisieren window.location.hash?

Question

Mit Hilfe von JavaScript, ist es eine Möglichkeit, window.location.hash zu aktualisieren, ohne die Webseite zu scrollen?

Ich habe anklickbare Titelelemente, die die Sichtbarkeit eines div direkt unter ihnen hin- und herschalten. Ich möchte den / foo # bar in der Geschichte, wenn Titel klicken, wollen aber nicht die Seite Scrollen über. Also, wenn aus / foo # bar navigieren weg werde ich in der Lage sein, die Zurück-Taste zu verwenden und haben die div mit der ID in window.location.hash bei der Rückkehr sichtbar sein.

Ist dieses Verhalten möglich?

Answer 1

Dieses Verhalten ist sehr viel möglich. Sie sollten einige der Bibliotheken Blick in die entwickelt wurden Sie diese Funktionalität zu geben.

Really Simple History: http://code.google.com/p/reallysimplehistory/ SWFAddress: http://www.asual.com/swfaddress/

Answer 2

, um den Hash zu ändern, ohne dass die Seite neu geladen / Scroll zu haben, können Sie jetzt einfach nutzen html5 history.pushState.

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

Es ist von allen großen Browsern unterstützt:

http://caniuse.com/history

MDN:

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

Beachten Sie auch, dass die letzten URL-Parameter wir hier verwenden sind, können sie jede URL sein, es ist also nicht beschränkt auf Hashes.

Answer 3

So einfach wie es bekommt

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

Answer 4

Eine andere Sache, die Sie könnten versuchen, ändert sich der Hash-Punkte die ID des Elements vorübergehend. Arbeitete für mich!

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

Answer 5

Gesuche um einen Kommentar zu Catherines Antwort hinzufügen, aber ich habe nicht die rep noch -

.

Große Lösung jedoch wurde es nicht für mich in Chrome als $ arbeitet ( 'html') scrollTop () immer 0 zurück - eine kleine Änderung behebt das Problem:

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

Answer 6

Bas auf der Antwort von Sunny habe ich diese Funktion, die auch nicht definiert und nulls vermeidet:

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