Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
Bildlauf
smilies.4-user.de

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

Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; 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 oder hier in der Kürze liegt die Würze:

Was ist UX-Design

User Experience (UX) Design ist der Prozess der Gestaltung von digitalen oder physischen Produkten oder Dienstleistungen, die nützlich, einfach zu bedienen und angenehm für die Nutzer sind. Das Ziel des UX-Designs ist es, ein positives Erlebnis zu schaffen, das die Bedürfnisse der Nutzer erfüllt und ihre Zufriedenheit mit dem Produkt oder der Dienstleistung steigert.

Beim UX-Design geht es darum, die Bedürfnisse, Verhaltensweisen und Motivationen der Benutzer zu verstehen und dann ein Design zu entwickeln, das diese Bedürfnisse erfüllt. Dazu gehört auch die Betrachtung der gesamten User Journey, einschließlich der verschiedenen Berührungspunkte, die der Benutzer mit dem Produkt oder der Dienstleistung hat.

UX-Designer verwenden eine Vielzahl von Tools und Methoden, um ihre Entwürfe zu entwerfen und zu testen, z. B. Benutzerforschung, Prototyping, Benutzertests und Usability-Tests. Sie arbeiten eng mit anderen Mitgliedern des Produktteams zusammen, z. B. mit Produktmanagern, Entwicklern und Grafikdesignern, um sicherzustellen, dass das Produkt oder die Dienstleistung den Bedürfnissen der Benutzer entspricht und mit den Unternehmenszielen in Einklang steht.

Das ultimative Ziel des UX-Designs ist es, ein Produkt oder eine Dienstleistung zu schaffen, das/die nicht nur nützlich und einfach zu bedienen ist, sondern auch den Benutzer erfreut und sein Gesamterlebnis verbessert.

KI-Tool ChatGPT


Infolge im Titel Zurück nach oben scrollen ist das schon sehr gut. Da ist der scrolle 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 scrolle 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 nicht die separate js-Datei.

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:

  • Scrolltiefe,
  • 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 dort 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 in das Plug-in Code Snippets.
Mit Obhut von Codes! – bleibt das auch nach Theme-Update so.
Oder Child Theme! – zum Beispiel Quick Child 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 2023-Februar