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

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter. Info

Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

Einfach und intuitiv –
Der Classic-Editor für alle. Info

Classic Editor & Advanced Editor Tools
Erleben Sie es.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

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.

Snippets functions.php, CSS und JavaScript: das Child-Theme. Spezifisch, CSS+JS: das Plug-in Header Footer Code Manager. Zum Workflow und Browser Cache siehe 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;
}