Scrollposition auf nächste Seite übernehmen

[casr]

Hallo Forum

Wie kann ich, kompatibel mit jedem Browser, die aktuelle Scrollposition auf eine neue Seite übernehmen?

Anwendung: Ein treeview-ähnlicher Seitenaufbau. Bei anklicken eines Nodes öffnet sich dieser. Um das ganze möglichst bandbreitenschondend zu realisieren, möchte ich den Inhalt eines Nodes erst laden, wenn dieser geöffnet ist. Das heisst, ich lade die Seite neu, und stellen den angeklickten Node geöffnet dar. Um aber den Aufklappeffekt zu realisieren, muss die neue Seite wieder genau an die gleiche Stelle scrollen, an der die "alte" verlassen wurde. Da die Nodes immer nach unten geöffnet werden, habe ich somit eine immer saubere Darstellung, und kein "wandern" nach unten oder oben.

Wie also realisiere ich ein Weitergeben der aktuellen Scrollposition?

Irgendwelche Parameter im Link mitgeben ist kein Problem.

Wichtig ist mir die Browserunabhängigkeit, und eine möglichst einfache Implementierung, da der Quellcode von verschiedenen Leuten gepflegt wird, und dieser Punkt ein sehr zentrales Element darstellt.

Site ist PHP/MySQL und JavaScript für genau solche Sachen wie in diesem Beitrag beschrieben.

Über möglichst viele unterschiedliche Ansätze würde ich mich freuen.

Gruss und Dank

Casr

 

[Sven Mintel]

Die aktuelle "Scrollposition" kannst du ermitteln per

• IE
  document.body.scrollTop
• andere Browser
  window.pageYOffset

Beim onclick der Links könntest du dem jeweiligen Link diesen Parameter an die URL ranhängen.
Auf der Folgeseite musst du ihn dann nur auslesen(ob mit JS oder PHP ist dir überlassen)... und per scrollTo() zu der gewünschten Position scrollen(sobald die Seite geladen ist).

Thema "Bandbreitenschonung"...
schonender dürfte es sein, wenn du garnicht erst eine neue Seite lädts, um den Tree aufzuklappen... und der "Aufklappeffekt" wäre dann kein Problem

 

[casr]

Hallo und Danke für deine Antwort.

Welche Möglichkeiten habe ich denn, Daten nur für bestimmte Bereiche zu laden.

Zur Erklärung: Das ganze ist für einen Kulturladen. z.B. auf der Programm-Seite soll Anfangs nur das Datum und der Name des Anlasses stehen. Bei Klick auf den Anlass soll dieser dann aufklappen, und seine Detail preisgeben. Dieser Stil soll auf die ganze Seite übernommen werden können. So zum Beispiel eine Galerie, wieder mit Name, dann Klick und eine Liste mit Thumbnails erscheint. Oder News, Klick auf Überschrift und die Details erscheinen. Es sollen so z.b. im Programm mehrere Anlässe geöffnet und auch wieder geschlossen werden können (wie im Win-Explorer).

Meine Idee wegen der Bandbreitenschonung rührt von der Galerie her. Wenn ich da für 20 Anlässe schon mal alle Thumbnails laden muss, geht das viel zu lange.

Wenn es aber eine Möglichkeit gibt, z.B. nur gewissen Div-Container neu zu laden, dann wäre das natürlich noch viel besser.

Gruss Casr

 

[Sven Mintel]

Was ich mit der "Bandbreitenschonung" meinte, betraf lediglich das Menu....

also das komplette Menu laden, und per JS auf/zuklappen(ohne die Seite neu zu laden).

Die Möglichkeit, nur den Inhalt einzelner Seitenelemente neu zu Laden, gibt es auch.
Ich hab damit vor ner Weile mal rumgespielt, und bin diesen Weg eingeschlagen:

Anstatt die Seite komplett neu zu laden, hab ich ein PHP-Skript genommen, welches in einem versteckten Frame(iFrame) geladen wurde.
Diesem Skript wurden per URL-Parameter mitgeteilt, welcher Inhalt anzuzeigen ist.
Das Skript hat nun lediglich den JS-Skriptcode erstellt, welcher nötig ist, um den Inhalt des/der jeweiligen Elemente zu ändern(per innerHTML bspw.)... und selbiges hat wurde dann ausgeführt.

Die Links selbst wurden erst per JS geändert... damit dies nur Browsern angeboten wird, welche es auch können(es kann jeder halbwegs aktuelle Browser).
Für die anderen Browser hat das PHP-Skript dann ne ganz normale Seite generiert.

Es gibt zwar noch die Möglichkeit, per JS XML-Dokumente im Hintergrund zu Laden, da dies aber noch nicht so umfassend in aktuellen Browsern implementiert ist, ist es leider weniger empfehlenwert(obwohl es ansich die vorteilhaftere Technik wäre)
Hat dereinst problemlos geklappt.

 

[casr]

Zu kompliziert. Ich warte wie gesagt den Code nicht alleine, und in absehbarer Zeit nach der Aufschaltung werde ich auch die gesamte Verantwortung darüber abgeben. Mir liegt sehr viel daran, dass er möglichst "einfach" und robust ist.

Die Bandbreite ist auch weniger ein Problem, da ja auch auf meine Art nie allzuviele Daten übertragen werden. Es gibt lediglich relativ viele Datenbank-Abfragen, aber die fange ich mit einem in der Session gespeicherten XML ab.

Noch eine kleine Frage: Gibt es eine Möglichkeit, dem Browser warten zu lassen bis die neue Seite geladen ist, ehe er die Seite wechselt. Würde den Aufklappt-Effekt noch das letzte Quäntchen Schönheit verleihen...

Gruss Casr

 

[Sven Mintel]

Gibt es eine Möglichkeit, dem Browser warten zu lassen bis die neue Seite geladen ist, ehe er die Seite wechselt. Würde den Aufklappt-Effekt noch das letzte Quäntchen Schönheit verleihen...

Nö... das dürfte nicht gehen

 

[casr]

Ich gebe zu, ich bin überhaupt kein JS Spezi. PHP, und vb.net sind mein täglich Business. Deshalb noch eine Frage.

Wie löse ich das übergeben der Scrollposition am elegantesten (als Programmierer ist mir Eleganz bei Code sehr wichtig...)?

Bei click auf einem Linke sollte ein JScript ausgeführt werden, welches die aktuelle ScrollPosition ermittelt, und dann dem Link anhängt (z.B. ..&pos=568).
Auf der neuen Seite soll dann die Pos wieder angescrollt werden, d.h. Link auswerten und mit scrollTo hinscrollen (ich liebe neudeutsch...)

Gruss Casr

 

[Sven Mintel]

Am Sinnvollsten wäre sicher eine Funktion, welche du beim onClick aufrufst... welche die Zieladresse ändert,
z.B.

<script type="text/javascript">
<!--
function funktion(oLnk)
{   
    strParam=(String(oLnk.href).match(/\?/)) ? '&' : '?';
    strParam+='pos=';
    strParam+=(document.all) ? document.body.scrollTop : window.pageYOffset;
    oLnk.href+=strParam;
    return true;
}
//-->
</script>

Der Aufuf per

onclick="return funktion(this)"

...im jeweiligen Link.

Auf der Zielseite kannst du den übergebenen Parameter dann z.B. per PHP ermitteln, und den nötigen JS-Code zum Scrollen in die Seite schreiben:

<body<?php if(isset($_GET['pos'])){echo ' onload="window.scrollTo(0,'.$_GET['pos'].')"';}?>>

...hier z.B. in den BODY-Tag.

 

[moistwanted]

Hallo Leute

Will das selbe machen wie hier beschrieben ist, aber bei mir geht es mit dem InternetExplorer nicht!

Ich hab den Code von Sven Mintel (s.o.) genommen und mit Firefox geht alles wunderbar, aber Der IE kann irgendwie die Position nicht auslesen und gibt dann in der URL immer ..&pos=0 aus anstatt die richtige Position reinzuschreiben!

Könnt ihr mir vielleicht helfen?

EDIT.
Hab gerade herausgefunden das mein InternetExplorer die Funktion document.body.scrollTop
nicht kann! Gibt es da eine andere Möglichkeit?

 

[Sven Mintel]

EDIT.
Hab gerade herausgefunden das mein InternetExplorer die Funktion document.body.scrollTop
nicht kann! Gibt es da eine andere Möglichkeit?

Was ist das denn für ein Internet-Explorer?

Auf jeden Fall scheint er es zu kennen/können, denn andernfalls würde er dort auch nicht 0 übermitteln.