# Scrollposition auf nächste Seite übernehmen



## casr (2. März 2005)

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 (3. März 2005)

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 (3. März 2005)

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 (3. März 2005)

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 (3. März 2005)

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 (3. März 2005)

casr hat gesagt.:
			
		

> 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 (3. März 2005)

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 (4. März 2005)

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 (18. März 2005)

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 (18. März 2005)

moistwanted hat gesagt.:
			
		

> 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.


----------



## moistwanted (18. März 2005)

Hab den neuesten! also 6.0!

hab ganz erlich auch nichsoviel Ahnung von Javascript, daher weiß ich nich wie ich das ganze machen soll!
Hatte das hier versucht:


```
alert(document.body.scrollTop);
```

Da gibt er immer undefind aus!

so ruf ich das Script auf:

```
<a href='user_detail.php?id=1&amp;shout=6' onclick="return funktion(this)">Next</a>
```


----------



## Sven Mintel (18. März 2005)

Keine Ahnung, was da schief läuft...im Zweifelsfall hat dein IE ne Macke, denn normalerweise kennt er das(seit Version 4)


----------



## Ann Drew (19. März 2005)

das ist nur dann undefined wenn du keinen IE hast.
  Bist du sicher dass du das auf dem IE getestet hast?

 und schmeiss das &amp; raus und ersetz es durch &


----------



## moistwanted (19. März 2005)

Natürlich hab ichs mit dem IE getestet Ganz unfähig bin ich ja nich!

und das $amp; brauch ich weil die seite xhtml konform sein soll!

Habs auch auf verschieden Rechnern probiert!
Lieg anscheinend an der Einbindung inn die Seite!

Wenn ich nur eine html-Seite mit dem Script mache gehts, aber wenn ich es in meine php-seite einbau gehts nichmehr!
und wenn ichs in eins der Templates schreibe krieg ich ne Fehlermeldung von Smarty!
wenn ich das dann in dem Template in einen php-block schreibe gehts wieder nur mit Firefox!
Das Problem ist auch so, dass die Seite mit Templates und Php aufgebaut ist, dass ich an der Stelle keine html-Datei machen kann!

Hier nochmal der SmartyError:

```
Fatal error: Smarty error: [in user.tpl line 5]: syntax error: unrecognized tag: strParam=(String(oLnk.href).match(/\?/)) ? '&' : '?'; strParam+='pos='; strParam+=(document.all) ? document.body.scrollTop : window.pageYOffset; oLnk.href+=strParam; return true; (Smarty_Compiler.class.php, line 417) in /var/www/web14/html/n3w/smarty/Smarty.class.php on line 1088
```


----------



## casr (19. März 2005)

Da ist wirklich was faul.

Ich habe dieses Thema zu Beginn eines neuen Projekts gestartet. Mit dem untenstehenden Code habe ich dann alle möglichen Browser getestet (Win, Mac, Linux), und es hat einwandfrei funktioniert. Mittlerweilen ist die Seite schon recht vortgeschritten, und es ist eine Menge Code dazugekommen, diese Schnipsel stehen aber immer noch unverändert im Einsatz.

Mir ist das in letzter Zeit nicht aufgefallen, da ich immer mit Mozilla getestet habe (so von wegen sauberem CSS und so...), aber Irgendwas verwirrt den IE, denn document.body.scrollTop liefert mir jetzt immer 0. Ich habe einen alert(document.body.scrollTop) in die Funktion CompleteLink eingebaut, damit ich die Fehlerquellen minimieren kann, und er liefert mir 0, auch wenn ich deutlich gescrollt habe.

Was könnte das Problem sein?

Wenn keiner eine Ahnung hat, werde ich Zeile für Zeile löschen, bis ich des Übel bei der Wurzel zu fassen kirege, und es dann hier anprangern...

So long... Casr



```
function CompleteLink(oLnk){
    var pos = (document.all) ? document.body.scrollTop : window.pageYOffset;
    var param = "pos=" + pos;
    oLnk.href+= param;
    return true;
}

<A href="test.php" onclick="CompleteLink(this);">Scroll to Pos!</A>
```


----------



## casr (19. März 2005)

Also habs bei mir gefixt.

Die XML Definition machte es aus. Hier die ersten Zeilen des Browser-Source. Wenn es der Browser so kiregt, dann klappts bei mir


```
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
```

Ohne die XML Definition lieferte document.body.scrollTop immer 0.


----------



## moistwanted (20. März 2005)

Wow!

Jetzt funktioniert es bei mir auch!
musste zwar meine css-dateien umschreiben, aber jetzt gehts super!

Danke casr!


----------

