scbawik
Senior HTML'ler
Hallo !
Ich habe folgendes Problem und hoffe ihr könnt mir helfen:
Bin gerade dabei eine Seite zu realisieren bei der man sich per Scrollbalken durch die einzelnen Seiten navigieren kann. Dazu wird jedesmal der Hashtag (oder Anker oder wie man das nennt; #/Seite1) geändert, wenn man eine neue Seite aufruft/ansteuert. Das ist schonmal kein Problem.
Als Hilfsmittel verwende ich jQuery und das Plugin 'hashchange'. Folgender Code wird nun bei einem hashchange-Event ausgeführt:
Dieser Code wird nun, wie er sollte, bei einem Klick auf einen Menüpunkt bzw. beim Benutzen der Browser-History ausgeführt.
Beim Klick auf den Menüpunkt funktioniert alles einwandfrei. Die Seite scrollt zum Ziel. Beim Benutzen der History habe ich jedoch das Problem, dass der Browser automatisch vor der Animation zur ursprünglichen Scroll-Position zurückspringt und dann erst die Animation zum Ziel beginnt.
Was ich also erreichen möchte, ist die Beibehaltung der Scrollposition bei Verwendung von History Vor/Zurück.
Noch was: Dass ich die Scroll-Position vor dem Hashchange in eine Variable packen könnte und diese Position nach dem Hashchange wieder einnehmen, ist mir schon bewusst. Das wäre jedoch die absolute Notlösung für mich, da ich denke dass man dann ein kurzes Flackern erkennt. Lieber wäre mir etwas wie event.preventDefault();
Hoffe es ist einigermaßen verständlich was ich beabsichtige, Google konnte mir leider nicht helfen.
Vielen, vielen Dank!
Ich habe folgendes Problem und hoffe ihr könnt mir helfen:
Bin gerade dabei eine Seite zu realisieren bei der man sich per Scrollbalken durch die einzelnen Seiten navigieren kann. Dazu wird jedesmal der Hashtag (oder Anker oder wie man das nennt; #/Seite1) geändert, wenn man eine neue Seite aufruft/ansteuert. Das ist schonmal kein Problem.
Als Hilfsmittel verwende ich jQuery und das Plugin 'hashchange'. Folgender Code wird nun bei einem hashchange-Event ausgeführt:
PHP:
hashchange: function (options) {
var target = window.location.hash.substr(2);
var scrollTop = 0;
if(target != '') scrollTop = $('[id="' + target + '"]').offset().top;
$("body, html").animate({scrollTop: scrollTop },800);
}Dieser Code wird nun, wie er sollte, bei einem Klick auf einen Menüpunkt bzw. beim Benutzen der Browser-History ausgeführt.
Beim Klick auf den Menüpunkt funktioniert alles einwandfrei. Die Seite scrollt zum Ziel. Beim Benutzen der History habe ich jedoch das Problem, dass der Browser automatisch vor der Animation zur ursprünglichen Scroll-Position zurückspringt und dann erst die Animation zum Ziel beginnt.
Was ich also erreichen möchte, ist die Beibehaltung der Scrollposition bei Verwendung von History Vor/Zurück.
Noch was: Dass ich die Scroll-Position vor dem Hashchange in eine Variable packen könnte und diese Position nach dem Hashchange wieder einnehmen, ist mir schon bewusst. Das wäre jedoch die absolute Notlösung für mich, da ich denke dass man dann ein kurzes Flackern erkennt. Lieber wäre mir etwas wie event.preventDefault();
Hoffe es ist einigermaßen verständlich was ich beabsichtige, Google konnte mir leider nicht helfen.
Vielen, vielen Dank!
