Nicht jedes Theme bietet diesen WordPress Scroll Button, der Nutzern das schnelle Scrollen vom Ende einer Seite oder eines Beitrags an den Anfang ermöglicht. Allerdings ist diese Funktion auch nicht in jedem Fall zwingend nötig. Wenn Sie jedoch zu der Erkenntnis gelangen, dass Sie ihn brauchen, rüsten Sie ihn einfach nach mit dem WordPress Plugin Float to Top Button.
Einsatzzweck eines WordPress Scroll Button
Sagen wir, die Hauptnavigation Ihres Themes befindet sich im Bereich des Headers. Allerdings sieht das Theme nicht vor, die Navigation am oberen Fensterrand zu fixieren. Scrollen Ihre Nutzer nun weiter nach unten, haben sie auf diese Weise nicht jederzeit Zugriff auf Ihr Menü. Was tun? Sie können probieren, Ihren Header zu fixieren. Meist funktioniert das auch ganz gut. Aber was ist, wenn Sie keine Ahnung haben, wie Sie das bewerkstelligen sollen, ohne den Kopfbereich des Themes komplett ändern zu müssen? Nun kommt das Plugin zum Einsatz. Zwar fixiert es nicht Ihre Navigation. Es bietet Ihren Nutzern aber das schnelle Scrollen zum Seitenanfang, somit also auch zur Hauptnavigation.
Float to Top Button Plugin
Das Plugin bietet verschiedene Buttons. Nach der Installation und dem Aktivieren des Plugins stellt es Ihnen auf jeder Seite und jedem Beitrag einen von mehreren Buttons bereit, die das Plugin frei Haus mitliefert. Diese Button sind allesamt relativ klein (38 x 38 Pixel) und fast alle in Grautönen gehalten. Damit stellt der Entwickler sicher, dass sie in so ziemlich jede Umgebung passen.
Einstellungen > Float to Top Button
Wenn Ihnen nun aber das Aussehen oder das Verhalten des Button nicht gefällt, so haben Sie die Möglichkeit, ihn über Einstellungen > Float to Top Button zu modifizieren. So bietet das Plugin die Möglichkeit, ein eigenes Bildchen zu benutzen. Dies kann dann auch größer sein als die 38 x 38 Pixel und den eigenen Farbwert berücksichtigen. Wir könnten so zum Beispiel einen der folgenden Buttons benutzen (wobei die letzte Variante wahrlich nicht ernst gemeint ist – tatsächlich funktioniert es aber auch mit einem animated gif):
Ihr Button sollte, sofern er nur einen farbigen Pfeil oder den Pfeil auf zum Beispiel runder Fläche zeigt, auf transparentem Hintergrund liegen. Als Dateiformat wählen Sie .png oder .gif. Laden Sie ihn in Ihre Mediathek und fügen Sie dann den Link in das entsprechende Feld der Plugin-Einstellungen ein.
Damit das Plugin diese etwas größeren Buttons passend anzeigen kann, braucht es eine Modifikation der ID #scrollUp. Die Standarddefinition geht ja von einem kleinen Bild aus. Deshalb hinterlegen Sie nun im Rahmen der style.css Ihres Child Themes oder Ihres benutzerdefinierten CSS die tatsächlichen Dimensionen Ihres Bildes. In meinem Fall sind es 75 x 75 Pixel:
#scrollUp
{
width: 75px;
height: 75px;
}Weitere Einstellungsoptionen
Die weiteren Einstellungsoptionen des Float to Top Button wirken auf den ersten Blick relativ unspektakulär. Zum Beispiel hat sich mir der Effekt unterschiedlicher Distanzen nach oben, bevor das Bild erscheint, nicht erschlossen. Ob ich nun 10, 300 oder 1000 Pixel angebe, der Button erscheint immer in derselben Distanz. Auch scheint mein Auge nicht in der Lage zu sein, Unterschiede im Bereich der Millisekunden bei der Angabe Speed back to top zu erkennen.
Bedeutsamer hingegen ist die Frage, wo der WordPress Scroll Button erscheinen soll: unten rechts oder oben links? Ebenso die Frage, ob er eingeblendet (fade) werden oder von unten ins Bild gleiten (slide) soll. Er kann aber auch ohne Effekt erscheinen.
Schließlich können Sie noch den Grad der Transparenz des Buttons festlegen und bestimmen, ob er auf Smartphones überhaupt erscheinen soll.
Nur Text Button
Es ist auch möglich mit diesem Plugin, dass Ihr WordPress Scroll Button nur Text zeigt. Sagen wir: Der Button soll den Text »zurück nach oben« besagen. Wie auch immer Ihr Text lauten soll: Geben Sie ihn anstelle des »Top of Page« an. Alle weiteren Modifikationen erfolgen über Angaben für die ID #ScrollUp.
Im Rahmen dieser Angaben ist es möglich, gar kein Hintergrundbild anzeigen zu lassen und Ihren Text in den sichtbaren Bereich zu rücken. Damit der dann noch besser lesbar ist, sollte er auf farbigem Grund erscheinen. Zudem sollten die Größe des Button und die Schriftgröße zueinander passen. Ein bisschen Padding sorgt für den angemessenen Innenabstand, und der Border Radius dafür, dass die Ecken ein bisschen abgerundet sein.
Die CSS-Definition lautet in diesem Fall:
#scrollUp {
width: 200px;
height: 40px;
color:#fff;
text-indent:0;
font-size:20px;
background-image:none !important;
background-color: #ff0c45;
border-radius: 5px;
padding:5px 10px;
}Der Button als solches sähe dann so aus:
Dank hinterlegtem Sprunglink führt dieser Button übrigens tatsächlich nach oben. Allerdings ist der Effekt nicht so hübsch: Sprunglink heißt wirklich springen und nicht scrollen. Zum Ziel (oben) führt er dennoch.
Beitragsbilder: Britta Kretschmer
Schreibe einen Kommentar