Ich persönlich vermisse eine Funktion, die ein weiches Scrollen bei Webseiten mit viel Inhalt ermöglicht und darüberhinaus ggf. bei Verwendung von Sprungmarken auch automatisch stoppt.
Nach einiger Suche bin ich auch ein Code Snipet gestoßen, dass all diese Voraussetzungen erfüllt und sich zudem relativ simpel einbinden lässt.
Am Beispiel einer neuen Seite möchte euch erklären, wie ihr es mit wenigen Schritten realisieren könnt. Ich möchte euch aber vorsichtshalber darauf hinweisen, dass sich meine Selbstversuche bisher auf reine TEXTSEITEN beschränkt haben und ich keine Aussage dahingehend treffen kann, wie sich das ganze bei gleichzeitiger Verwendung mit anderen Zeta Widgets verhält.
1. Neue Zeta Seite erstellen
2. Mit dem + Symbol ein Widget "Quellcode" erstellen und dort den nachfolgenden Quelltext einfügen
<script>
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 2000);
return false;
}
}
});
</script>3. Die Zahl (im Snipet hier mit 2000 angegeben) dokumentiert die Scrollgeschwindigkeit. Je höher die Zahl, desto langsamer die Scrollgeschwindigkeit
4. Unterhalb des soeben eingefügten Quellcode Widgets mit dem + Symbol das Widget "Nach oben" einfügen.
5. Unterhalb der Seitenbezeichnung könnt ihr nun dem + Symbol ein Text Widget hinzufügen und hier beliebig langen Text einfügen.
6. Das ganze anschließend speichern und auf die Vorschau Schaltfläche klicken.
7. Geht auf eurer Seite ganz nach unten und klickt auf den "Nach oben" Link.
8. Wenn alles geklappt hat, sollte die Seite nun wieder "weich" nach oben fahren. Die Geschwindigkeit könnt ihr durch Ändern des Zahlenwertes anpassen.
Zusätzlich kann man Sprungmarken in das Textdokument einbauen. Um das Ganze einfach zu dokumentieren könnt ihr folgendes machen:
1. Öffnet dazu zunächst euer Textwidget und wechselt in die Quellcode Ansicht
2. Fügt im Anschluss den folgenden Quellcode hinzu, am besten relativ weit oben
<p>
<a href="#eins">Abschnitt 1</a><br>
<a href="#zwei">Abschnitt 2</a><br>
<a href="#drei">Nach unten</a>
</p>3. Innerhalb eures langen Textes setzt ihr nun die jeweiligen Sprungmarken an beliebiger Stelle
4. Setzt dazu folgenden Quellcode an die Position, wo euer Abschnitt 1 startet
<h1 id="eins">Abschnitt 1</h1>
<p><a href="#top">Nach oben</a></p>
5. Dasselbe macht ihr für den Abschnitt 2
<h1 id="zwei">Abschnitt 2</h1>
<p><a href="#top">Nach oben</a></p>
6. Am Textende setzt ihr die Sprungmarke für "Nach unten"
<p id="drei"></p>
7. Für "Nach oben" benötigt ihr hier keinen Link, da ihr ja bereits das Widget "Nach oben" nutzt.
7. Speichert euer Textdokument und testet die Ansteuerung der einzelnen Verweise.
Ihr könnt natürlich beliebig viele Sprungmarken in euer Dokument setzen. Ob das aber Sinn macht, müsst ihr selber entscheiden.
Ein kleiner Nachteil: Bei Zeta Layouts deren Hauptmenues in den Layout Einstellungen auf Scrollend "nein" gesetzt werden können, das Menue somit am oberen Bildschirmrand fest verankert ist, verschwinden die Sprungmarken leider unter dem Menu. Ein Lösung dafür habe ich nicht. Stellt ihr auf Scrollend "Ja" und löst somit die Menueverankerung so funktioniert es auch hier wunderbar.
Viel Erfolg beim Ausprobieren .....
Super dass es nun doch klappt und danke für die Rückmeldung. Ich hatte es nämlich auch noch einmal mit diversen Layouts probiert und bei mir hat es soweit problemlos geklappt. Wie gesagt halt mit der kleinen, im Post 1 beschriebenen Einschränkung bei angedocktem Menue im Layout "Modern Responsive". Aber auch das kann man mit einem kleinen Trick umgehen.