Ankerpunkte, engl. bookmarks (= Bucheinmerker, Seitenhalter) sind markierte Stellen innerhalb eines Textes oder Beitrages, die mit einem Verweis direkt angesteuert werden können.
Der Benutzer erreicht diese Stellen im Text bequem per Mausklick auf einen verweisenden Link, ohne lange und umständlich scrollen zu müssen.
Stellen im Text, die als Ankerpunkt funktionieren sollen, werden mit einer Marke definiert!
Damit alle Ankerstellen eindeutig erkannt werden, sollte jeder Name (z.B. "marke_01") nur einmal vergeben werden!
<a name="marke_01"></a>
Wie wird ein Verweis gesetzt?
Alle Verweise zum Anker haben einen einheitlichen Aufbau (HTML), egal ob sie zu einem Verweisziel in der gleichen Datei oder zu einer beliebigen Web-Adresse führen!
Klickt man nun auf den Link am Anfang des Dokuments (Verweis), so wird an die Stelle gesprungen, die zuvor als Ankerstelle definiert worden ist.
Eine praktische Sache!
<a href="#marke_01">Verweistext</a>
Ein Verweis in externen Dateien:
Es ist möglich auch Links auf Ankerstellen in externen (anderen) Dateien zu setzen. Der Browser zeigt dann die markierte Stelle in der Eingabezeile #marke_01 an.
Der Pfadangabe (hier = Seite07.html) muss nur das Gatterzeichen (#) und der Ankername (marke_01) angehängt werden.
Alles muss in einem Stück und ohne Leerzeichen geschrieben verwenden!
Eine praktische Funktion für den Besucher ist es übrigens, wenn am Ende des Dokuments einen Link steht, der ihn wieder zum Anfang zurückbefördert! Dazu muss natürlich ein Ankerpunkt am Anfang des Dokuments erstellt werden!
Scrollen zum Seitenanfang und zum Seitenende Aktualisiert 17.02.19
Bei der folgenden Version wird das Springen zum Seitenanfang und zum Seitenende über Navigations-Pfeile ausgelöst, die fest im oberen Drittel der linken oder rechten Seite platziert sind! Zusätzlich sind noch 2 Pfeile für Mittenpositionen möglich. Der Vorteil liegt darin, dass die Auslösepfeile beim Scrollen mitwandern, nicht aus dem Sichtfeld verschwinden und immer erreichbar sind. • Wichtig ist, dass das Forum einen Rand aufweist, damit hier die Pfeile Platz haben. • Der Rand kann über die Breite des Forums bestimmt werden. Ein guter Wert liegt bei 95-98%! • Das gesamte Script kommt in die Kopfzeile, wodurch ein Eingriff ins Template vermieden wird!
Über die Top-Werte in Zeile 1-4 werden die Scroll-Positionen festgelegt!
Über "top" und "right" in Zeile 7, 9, 11+13 wird die Position der Pfeile bestimmt (hier rechts). Es hat sich gezeigt, dass die Eintragung für jedes Icon notwendig ist, um Darstellungsproblemen im "Google Chrome-Browser" vorzubeugen.
Mit "width" lassen sich die Icons in ihrer Größe anpassen.
Scrollen zum Seitenanfang und zum Seitenende mit Mouseover-Effekt
Transparente Navigationspfeile • Eine weitere Möglichkeit währe die Pfeile bei Inaktivität transparent (eingegraut) darzustellen. • Man benötigt zudem nur die Pfeilgrafik, die im aktiven Zustand angezeigt werden soll. • Das gesamte Script kommt in die Kopfzeile, wodurch ein Eingriff ins Template vermieden wird!
• Unter "trans" (Zeile 2) kann der Grad der "Eingrauung" bestimmt werden. Es ist darauf zu achten, dass die Werte für "opacity" + "filter" im gleichen Verhältnis geändert werden!
Die folgende Scroll-Navigation baut auf das Plugin "Pfeile Up Down" von TripleM / Mario 4370 auf, hat 6 neue Funktionen und kann in die [tipp]Kopfzeile[info2] Admin > Layout > Kopf- & Fußzeile[/tipp] eingebaut werden!
Das Template wird somit nicht verändert!
Das Script hat folgende zusätzliche und nützliche Funktionen:
Funktioniert problemlos auch im Portal (z.Z. allerdings nicht als Plugin)!
Die Navigationspfeile sind mit einem Transparent-Effekt ausgestattet!
Die Navigationspfeile werden komplett ausgeblendet, wenn die Seite in ihrer Höhe zu gering ist und die Pfeile nicht gebraucht werden! Wie z.B. im "Login"!
Die Navigationspfeile werden ebenfalls ausgeblendet, wenn die Breite der Seite ein Maß unterschreitet und die Pfeile in den Beitrag rücken (Minimierung Fenster)!
Die mittleren Navigationspfeile werden ausgeblendet, wenn ein schrittweises scrollen nicht benötigt wird! Wie z.B. im "Kalender"!
Das schrittweise Scrollen wird für kleine Monitore automatisch angepasst!
Die Tooltipps werden nicht mehr angezeigt, weil sie bei der Navigation stören!
Das Script wird in die Kopfzeile eingebaut.
In Zeile 3 wird die Höhe (hier 170px) und der Abstand zum linken Rand (hier 5px) eingestellt!
In Zeile 5 wird der Abstand zum rechten Rand eingestellt (hier 5px)!
In Zeile 6 kann die Intensität des Transparent-Effekt angepasst werden!
In Zeile 35+45 kann die Schrittweite für kleine und in Zeile 37+47 für größere Monitore eingestellt werden!
In Zeile 86-89 können die Pfeilgrafiken angepasst werden!
Wird die rechte Scroll-Navigation nicht benötigt, Zeile 5,16-18 löschen!
Erweiterung des Plugins "Pfeile Up Down": Wer nicht das komplette Script in die Kopfzeile setzen will, kann auch das Plugin "Pfeile Up Down" wie folgt erweitern!
• Hier fällt allerdings die automatische Anpassung an kleinere Monitore oder Tabletts für schrittweises Scrollen weg!
Die Plugin-Erweiterung wird in die Kopfzeile eingebaut.
Automatische Scroll-Funktion im gesamten Forum Aktualisiert 15.12.21
Das folgende Script gleicht dem aus Beitrag #2. Da jQuery bereits in allen Template vorhanden ist und nicht extra neu geladen werden muss, ist es von Vorteil die automatische Scroll-Funktion mit jQuery nutzbringend aufzubauen! Durch ein großes "Header-Aufgebot" kommt es vor, dass Beitragsseiten recht weit unten liegen! Mit diesem Script ist es möglich sie bei einem Seitenaufruf aus ihrer Versenkung automatisch in den Lesebereich zu scrollen! Zum Ansprechen und positionieren sind nur "classes" oder "id's" notwendig!
Vorteile des neuen Scriptes:
• Kein Eingriff ins Template! • Wahlweises Ansprechen der Scroll-Funktion! • Animiertes Scrollen! • Einstellen der Ansprechzeit und der Animation! • Einfügen zusätzlicher Befehle während des Scroll-Vorganges!
Einfügen in die Fußleiste (TP wird nicht verändert!)
In Zeile 5 werden die Seiten eintragen, die automatisch in den Sichtbereich gescrollt werden sollen!
Alternativ können über Zeile 6 die Seiten eingetragen werden, die nicht automatisch gescrollt werden sollen (Striche entfernen, Zeile 5 auskommentieren)!
In Zeile 10 kann über delay die Ansprechverzögerung (500 ms) eingetragen werden!
Mit dieser Verzögerungszeit kann sich die Seite sauber aufbauen und das Scrollen ruckelfrei einsetzen!
In Zeile 10 kann über animate die Scroll-Dauer (600 ms) eingetragen werden!
Zeile 8 zeigt eine Möglichkeit Befehle zusätzlich beim Scrollen einzubinden (hier wird der Hintergrund der Beiträge für eine kurze Zeit farblich verändert!)
Die Position der Scroll-Funktion ist in Zeile 10 über #navigation festgelegt. Das heißt, dass die Seite immer bis zur id="navigation scrollt", bis zur Navigationsleiste scollt! Es sind beliebig andere Positionen wählbar!
Benötigt man eine Korrektur der Position, so ist das in Zeile 10 über "top" möglich"!
Ein positiver Wert für "top +" scrollt die Seite weiter nach unten, ein negativer Wert "top -" weiter nach oben!
Wenn der Blog gut ausgebaut und besucht wird, ist es von Vorteil und erleichtert das Navigieren, wenn der Blog mit einer kleinen Scoll-Funktion ausgestattet wird! In dem folgenden Script ist es ohne großen Aufwand möglich im Forums-Blog und User-Blog nach oben oder unten zu scrollen!
Für den Forums-Blog:
• Das folgende Script braucht nur in die Fußzeile gesetzt zu werden! • Das Template wird dadurch nicht verändert!
1 2 3 4 5
<script language="JavaScript"> $('#blog-article-wrap').prepend('<a href="#scroll_unten"><img class="goto_bottom" src="//files.homepagemodules.de/b104774/a_156_3a9cd3dd.png" style="float:right;width:25px;margin-top:60px;padding:20px 20px 20px 100px;"></a><a name="scroll_oben"></a>');
$('#blog-article-wrap').append('<a href="#scroll_oben"><img class="goto_top" src="//files.homepagemodules.de/b104774/a_157_79e09788.png" style="float:right;width:25px;padding:20px 20px 40px 100px;"></a><a name="scroll_unten"></a>'); </script>
• Das folgende Script braucht nur in die Fußzeile gesetzt zu werden! • Das Template wird dadurch nicht verändert!
1 2 3 4 5
<script language="JavaScript"> $('.ublog').prepend('<a href="#scroll_unten"><img class="goto_bottom" src="//files.homepagemodules.de/b104774/a_156_3a9cd3dd.png" style="float:right;width:25px;padding:20px 20px 20px 100px;"></a><a name="scroll_oben"></a>');
$('.ublog').append('<a href="#scroll_oben"><img class="goto_top" src="//files.homepagemodules.de/b104774/a_157_79e09788.png" style="float:right;width:25px;padding:20px 20px 20px 100px;"></a><a name="scroll_unten"></a>'); </script>
Scroll-Funktion rechte Seite, mit festen Scroll-Positionen!
Hallo Scannerxy, dass Script, dass Du Dir ausgesucht hast, hat 4 feste Positionen!
• Die Positionen lassen sich in Zeile 12-15 einstellen! • Die Pfeile sind als Grafiken in Zeile 18, 20, 22 und 24 hinterlegt! • Über ein Bildbearbeitungsprogramm kann ganz einfach der Farbton der Grafiken verändert und wieder hochgeladen werden!
Problem: Beim Schließen der Xobor-Spoiler scrollt die Webseite nicht zum Spoiler-Ausgangspunkt zurück! Besonders unschön und auch verwirrend wirkt es sich bei mehreren Spoilern mit großem Inhalt aus. Hier findet man sich dann meistens im unteren oder im nächsten Teil des Beitrages wieder! Gut wäre es auch, wenn der Inhalt des geöffneten Spoilers gleich in Lesehöhe zur Verfügung stände!
Lösung: Das folgende Skript hat mehrere, hilfreiche Scroll-Funktionen und arbeitet auch betragsübergreifend recht gut!
Der geöffnete Spoiler springt in Lesehöhe!
Wird der Spoiler über die Titelleiste oder über den Schließ-Button zugeklappt, wird zum Spoiler-Ausgangspunkt zurück gescrollt!
Die Scroll-Funktionen arbeitet auch betragsübergreifend, d.h., es können in verschiedenen Beiträgen die Spoiler offen stehen und es wird zum Ausgangspunkt des gerade geschlossenen Spoilers zurück gescrollt!
Auch mit Spoiler-Verschachtelungen kommt das kleine Skipt gut zurecht!
Es lassen sich Lesehöhe und Scroll-Geschwindigkeit einstellen!
Installation
Folgendes Skript in die "Fußzeile" oder als Plugin in den "bottom_header" kopieren!
In Zeile 4 lässt sich die Lesehöhe einstellen. Hier sind es 250px vom oberen Rand. Eintrag erfolgt ohne die Einheit "px, Pixel"!
In Zeile 5 wird die Scroll-Geschwindigkeit angepasst. Hier sind es 500ms. Eintrag erfolgt ohne die Einheit "ms, Millisekunden"!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
<script> // Xobor-Spoiler mit Scroll-Funktion
var TopSpoil = 250; // Lesehöhe (ohne Pixel-Eintrag!) var TimeSpoil = 500; // Scroll-Geschwindigkeit!
Der Treffpunkt für Hilfe, Tricks & Tipps
»
XOBOR-Foren und Homepages
»
Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps!
»
Scrollen in langen Texten, Beiträgen und im gesamten Forum
04.06.2007 02:06 (zuletzt bearbeitet: 17.02.2019 22:58)
Foren Spende
Direkt zu PayPal
Thema drucken
Antworten
https://files.homepagemodules.de/b104774/f46t1197p2704n27_BGgtKIhF.png
https://files.homepagemodules.de/b104774/f46t1197p2704n29_lpKkRXDf.png
