Florians Forum » Webmaster » Xobor (Homepagemodules & Dynamicboard) » Funktionen & Template » Automatisch an bestimmte Stelle scrollen
#1 Automatisch an bestimmte Stelle scrollen von florian-zier
24.01.2008 16:01
Alle Unfeinheiten sind behoben!
Warum einfach, wenn's auch kompliziert geht?
Das Skript, das in den Head-Bereich eingefügt werden muss:
Wenn der Ankername geändert wird, muss er auch im Skript verändert werden:
document.getElementsByName("ziel")[0].scrollIntoView(true);
Die Position an die gescrollt werden soll durch einen Anker angeben.
Der Anker wird wieder an die gewünschte Position gesetzt. Er kann auf jeder Seite, auf der an eine bestimmte Stelle gescrollt werden soll, eingefügt werden.
Statt eines Ankers könnte man nun aber auch ein anderes Objekt mit dem Namen oder der ID ziel benennen.
Bei Verwendung einer ID müsste aber jeweils document.getElementsByName("ziel")[0] zu document.getElementById("ziel") abgeändert werden.
Der Anker kann auch über die Eingabe in der Adresszeile angesprungen werden.
Auch wenn dies nun überflüssig ist, da ja schon automatisch hingescrollt wird. Man kann ihn als User dann eben noch wahrnehemen.
Ein kleiner Vorteil des Ankers ist, dass wenn man auf eine Foren-Seite verlinkt und den Anker in der URL angibt, auch User mit deaktiviertem JavaScript an eine bestimmte Stelle befördert werden können.
Auch hier gilt:
- Onload-Befehl muss angegeben werden (AnleitungHier wird erklärt, wie man JavaScript-Funktionen automatisch beim Seitenaufruf ablaufen lässt.)
- Es wird auf den evtl. vorhandenen Anker #msg geprüft.
- Weitere Anker können mit der Ergänzung && window.location.hash.slice(0, 4) != '#ankername' in der If-Zeile gesichert werden. Die zweite Zahl in der Klammer muss je nach Zeichenanzahl des Ankers geändert werden. (#msg = 4 Zeichen)
Der Unterschied:
Es wird nicht über die Adresszeile ein Anker angesprungen, sondern es wird ein bestimmtes Objekt (hier der Anker) in den Sichtbereich gescrollt.
Die Adresszeile verändert sich somit gar nicht. Das Problem den Ankernamen aus der Adresszeile zu entfernen hat sich somit gelöst.
Achtung: Ein zweiter Name oder eine ID mit zielziel ist der Name dieses Beispiels.
Bei Wahl eines anderen Namens, darf natürlich dieser nur einmal verwendet werden!
darf auf der gleichen Seite nicht vergeben werden!!!
Ich habe im IE, Firefox und Opera erfolgreiche Tests durchgeführt!
Warum einfach, wenn's auch kompliziert geht?
Das Skript, das in den Head-Bereich eingefügt werden muss:
<script language="JavaScript">
// Automatisch scrollen
function goto_anker() {
if (window.location.hash.slice(0, 4) != '#msg' && document.getElementsByName("ziel")[0]) {
document.getElementsByName("ziel")[0].scrollIntoView(true);
}
}
</script>
// Automatisch scrollen
function goto_anker() {
if (window.location.hash.slice(0, 4) != '#msg' && document.getElementsByName("ziel")[0]) {
document.getElementsByName("ziel")[0].scrollIntoView(true);
}
}
</script>
Wenn der Ankername geändert wird, muss er auch im Skript verändert werden:
document.getElementsByName("ziel")[0].scrollIntoView(true);
Die Position an die gescrollt werden soll durch einen Anker angeben.
<a name="ziel"></a>
Der Anker wird wieder an die gewünschte Position gesetzt. Er kann auf jeder Seite, auf der an eine bestimmte Stelle gescrollt werden soll, eingefügt werden.
Statt eines Ankers könnte man nun aber auch ein anderes Objekt mit dem Namen oder der ID ziel benennen.
Bei Verwendung einer ID müsste aber jeweils document.getElementsByName("ziel")[0] zu document.getElementById("ziel") abgeändert werden.
Der Anker kann auch über die Eingabe in der Adresszeile angesprungen werden.
Auch wenn dies nun überflüssig ist, da ja schon automatisch hingescrollt wird. Man kann ihn als User dann eben noch wahrnehemen.
Ein kleiner Vorteil des Ankers ist, dass wenn man auf eine Foren-Seite verlinkt und den Anker in der URL angibt, auch User mit deaktiviertem JavaScript an eine bestimmte Stelle befördert werden können.
Auch hier gilt:
- Onload-Befehl muss angegeben werden (AnleitungHier wird erklärt, wie man JavaScript-Funktionen automatisch beim Seitenaufruf ablaufen lässt.)
- Es wird auf den evtl. vorhandenen Anker #msg geprüft.
- Weitere Anker können mit der Ergänzung && window.location.hash.slice(0, 4) != '#ankername' in der If-Zeile gesichert werden. Die zweite Zahl in der Klammer muss je nach Zeichenanzahl des Ankers geändert werden. (#msg = 4 Zeichen)
Der Unterschied:
Es wird nicht über die Adresszeile ein Anker angesprungen, sondern es wird ein bestimmtes Objekt (hier der Anker) in den Sichtbereich gescrollt.
Die Adresszeile verändert sich somit gar nicht. Das Problem den Ankernamen aus der Adresszeile zu entfernen hat sich somit gelöst.
Achtung: Ein zweiter Name oder eine ID mit zielziel ist der Name dieses Beispiels.
Bei Wahl eines anderen Namens, darf natürlich dieser nur einmal verwendet werden!
<div id="ziel">...</div> ist z.B. dann nicht mehr möglich!
Ich habe im IE, Firefox und Opera erfolgreiche Tests durchgeführt!