Smooth Scroll
Dank des Beitrags von Thomas Müller hier im Forum gibt es eine schöne und einfache Möglichkeit eine Scroll-Funktion in eine Zeta Producer-Seite einzubauen.
Um die Funktion zu integrieren binden wir ganz unten auf der Seite einen Artikel "Quellcode" ein. Den Code findet ihr hier auf der Seite ganz unten, an der markierten Stelle könnt ihr die Geschwindigkeit der Scroll-Funktion angeben.
Nun bindet Ihr euere Artikel ein und gebt diesen einen eindeutigen Namen in der Überschrift. Um die "nach Oben" Funktion zu integrieren sezt ihr in dem Artikel einen Text- oder Grafik-Link. Ihr geht beim Link auswählen auf "Extern" und tragt hier "#top" ohne Gänsefüßchen ein.
Nun könnt ihr auch ein Menü erstellen. Um die eizelnen Artikel zu verlinken geht ihr auf "Seite" wählt die Seite aus und in dem Auswahlfeld wo "Anfang der Seite" angegeben ist wählt ihr eueren Artikel aus.
Artikel 1
↓nächster Artikel↓ ↑zum Menü↑ ▲nach Oben▲
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Artikel 2
↓nächster Artikel↓ ↑zum Menü↑ ▲nach Oben▲
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Artikel 3
↓nächster Artikel↓ ↑zum Menü↑ ▲nach Oben▲
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Artikel 4
↓nächster Artikel↓ ↑zum Menü↑ ▲nach Oben▲
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Quellcode
Diesen Code als letzten Artikel der Seite (Widget > Quellcode) einfügen.
// Smooth Scroll to Top
$(document).ready(function() {
$('a[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) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset},
700);
return false;
}
}
});
});