Bildlauf

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

Info echo

Ist der Classic-Editor schon zu kennen? –
“Classic und TinyMCE – ist so klasse!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Anklickt Classic-Editor mit TinyMCE Advanced
“Classic und TinyMCE – ist das ausgezeichnete!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Klassischen Editor anwenden! – und …
“Classic und TinyMCE – ist so sehr gut !”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

… die Welt gehört dem, der sie genießt.
“Classic und TinyMCE – und tut sehr gut!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

TinyMCE aktive Installationen: 2+ Millionen
“Classic und TinyMCE – ist so fabelhaft!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Ansprechend! – so gehts hier zum Progress
“Classic und TinyMCE – ist de luxe!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

… und NEU! – Classic Widgets
“Classic Widgets – sind so grandiose!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Werkraum ist Werkraum und Frontend ist Frontend
Illustraion SVG unDraw; Ticker von Ditty News Ticker
“Classic und TinyMCE – ist so fein!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

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.

* UX-Design? – siehe bei Dr.Web.

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.

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
});

Pr. WP-Freund

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.

Die Snippets zur functions.php ab ins Plug-in Code Snippets.
Mit Obhut der Codes! – so bleibt das auch nach Theme-Update.
Oder Childs Theme? – zum Beitrag mit Childs Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!

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;
}

Ähnliches Thema

Ähnliches Thema im Titel Zurück-Button vorig Seite!


Aktualisiert im Jahr 2022-April