Bildlauf zurück nach oben! – der Besucher liebt UX-Design

Die Schaltfläche zum „Bildlauf zurück nach oben“, so float to top Button ist sehr von UX-Design. Statt selbst nach oben zu scrollen einfach float up zum Anfang des Dokuments. Also dem Besucher ist das in Beiträgen, die von groß sind, sehr dienlich. Besonders in mobilen Betriebssystemen scheint der Inhalt noch viel länger und so ist der Button zum Zurück nach oben noch mehr von Komfort. In diesem Beitrag ist das so gezeigt, wie das so ganz ohne separates WP-Plug-in funktioniert.

Infolge im Titel Zurück nach oben scrollen ist das schon sehr gut. Da ist der scroll so in einem Schubs, also ohne das jQuery von WordPress zu nutzen, um welches so schön zu floaten.

Table of Contents

Gewusst wie:
Bildlauf nach oben

Das CMS WordPress hat jQuery mit dabei, so ist das aus dem Core zu verwenden. Somit ist das dann ein scroll und nicht nur ein jamp.

Mit dabei ist das zum visuell des Buttons, die Scrolltiefe in Pixel zu bestimmen. Also des Moments, wo der Button im Bild erscheint. Weiter ist dann das Float-Top pixelgenau zu landen. Der Button ist hier mit dem <button>-Tag und das ist auch über CSS zu designen.

Der Code für die Theme `functions.php`

PHP hier samt JavaScript (jQuery). Also der Form braucht es keine separate js-Datei.

/**
* Nach oben scrollen Button für die functions.php
*/
add_action('wp_footer', function() {
?>

<button type="button" class="scroll-to-top">
<span class="dashicons dashicons-arrow-up-alt"></span>
</button>

<script>
(function($) {

$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 400) {
$(".scroll-to-top").fadeIn();
} else {
$(".scroll-to-top").fadeOut();
}
});

$(document).on("click", ".scroll-to-top", function(e) {
e.preventDefault();
$("html,body").animate({
scrollTop: 0
}, 'slow');
});

})(jQuery);
</script>

<?php
});

[kevin.p]

Erläuterung zum PHP

Betreff des <button>

<button type="button" class="scroll-to-top">   <span class="dashicons dashicons-arrow-up-alt"></span>
</button>

Das des Buttons ist mit dashicons der WP-Dashicons aus dem Core. Diese Dashicons möchten zur Funktion für das Frontend aktiviert werden. Sieh zum Beitrag Dashicons von WordPress.

Alternative

So einfach mit Text oder anders, dann ist das Obige zum Button und Dashicons zu ändern.

Sodass statt

<button type="button" class="scroll-to-top">
<span class="dashicons dashicons-arrow-up-alt"></span>
</button>

… das zu editieren mit:

<button type="button" class="scroll-to-top">Top</button>

Erläuterung zum JavaScript

Das ist betreffs:

Srolltiefe,
Float-Top und
das Tempo von Zurück nach oben.

Scrolltiefe

Das bei if (y > 400) ist der Scolltiefe (in Pixel) ab wann der Button sichtbar wird. Bspw ist hier der Button ab 400 (Pixel) visuell.

$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 400) {
$(".scroll-to-top").fadeIn();
} else {
$(".scroll-to-top").fadeOut();
}
});

Hier der Website siehe rechts unten, da ist der Button erst mit Scrolltiefe 3000 (Pixel), also (y > 3000)

Float-Top und das Tempo

Das bei scrollTop: 0 ist, anklicke Button wo das Top oben zu landen ist. Also der Pixel von oben gesehen.
Darunter das 'slow': 'medium' (Standard), 'slow' ist langsamer und 'fast' ist fast kein Unterschied zu 'medium' (Standard).
- Anstelle von 'slow', 'medium' und 'fast' kann man auch einfach 250 eintragen. Das wären dann 250 ms in der Geschwindigkeit. Beachte als Zahl ist das ohne die Anführungszeichen. Mit Anführungszeichen ist es ein String, sprich ein Text.

$(document).on("click", ".scroll-to-top", function(e) {
e.preventDefault();
$("html,body").animate({
scrollTop: 0
}, 'slow');
});

Das scrollTop: 0 ist bspw hier der Website mit scrollTop: 243 (Pixel) somit unterhalb des Headerbilds.

[codesnippets]

Button Bildlauf nach oben das CSS

So als Vorlage.

/* Button zum Zurück nach oben scrollen */
.scroll-to-top {
display: none;
position: fixed;
bottom: 20px;
right: 45px;
width: 44px;
height: 44px;
padding: 0px;
border-radius: 10px;
background-color: red;
opacity: 0.8;
/*font-size: 16px;*/
color: withe !important;
border-radius: 10px;
cursor: pointer;
z-index: 99; 
}
/*.scroll-to-top:hover {
background-color: #555;
}*/

Das /*font-size: 16px;*/ ist nur gut, wenn statt Dashicons der Alternative mit Text ist.
Das z-index: 99;, d. h. je höher der Wert, desto höher die Ebene (ähnlich wie in Programm für Bildbearbeitung). Im Standard ist alles auf der Ebene 1.
- Bspw da so ohne z-index würde der Button hier der Website ab dem Footer-Widget Bereich weg sein.
Das .scroll-to-top:hover ist auch nur so Beispiel von anders, denn der Hover für sich geht ja aus dem <button>-Tag selbst hervor.

Wie gehabt! – das fluchten bleibt dem Webmaster für sich.

Da ist CSS wie hier der Website

/* Button zum Zurück nach oben scrollen */
.scroll-to-top {
display: none;
position: fixed;
bottom: 20px;
right: 45px;
width: 44px;
height: 44px;
padding: 0px;
z-index: 99; 
/*background-color: #CCD1D8;*/
background-image: repeating-linear-gradient(90deg, #CCD1D8,#CCD1D8 22px, #DBE6FB 22px, #DBE6FB 44px);
opacity: 0.8;
color: #253B66 !important;
border-radius: 10px;
cursor: pointer;
}

.scroll-to-top:hover {
/*background-color: #555;*/
background-image: repeating-linear-gradient(90deg, #DBE6FB, 22px, #CCD1D8 22px, #CCD1D8 44px);
}

.scroll-to-top:hover:before {content: "top";
font-size: 1em;
}

Gewusst wie: Bildlauf nach oben

Der Code für die Theme functions.php