So fügen Sie Ihrer Website einen Back-to-Top-Button hinzu

Das haben wir alle schon durchgemacht. Sie haben einen fantastischen Online-Leitfaden gefunden, ganz nach unten gescrollt und dann gedacht: „Wow, ich würde gerne sehen, was diese Seite sonst noch zu bieten hat!“

Aber dann muss man scrollen.

ALLE.

DAS.

WEG.

ZU.

DAS.

OBEN.

Und dann denkst du…. „Hmm, egal.“ Und schließen Sie die Seite.

Als Webdesigner ist dies so ziemlich das Letzte, was Sie von jemandem erwarten, der auf einer von Ihnen erstellten Website landet. Glücklicherweise schreiben wir das Jahr 2019 und die Best Practices für modernes Webdesign haben uns die Lösung für dieses häufige UX-Problem geliefert: den klebrigen Back-to-Top-Button.

Was ist ein klebriger Back-to-Top-Button?

Auch bekannt als Scroll-to-Top-Button oder Go-to-Top-Bild, ist der Back-to-Top-Sticky-Button ein hilfreiches Navigationselement, das Benutzern hilft, zum Anfang der angezeigten Webseite zurückzukehren. Ein gängiges UI-Muster besteht darin, diese Schaltfläche in der unteren rechten Ecke des Bildschirms zu platzieren, wodurch sie über eine feste Position „klebrig“ wird, sodass sie immer zugänglich ist, wenn der Benutzer die Seite nach unten scrollt.

Was Sie beachten sollten, bevor Sie eine Zurück-nach-oben-Schaltfläche hinzufügen

Wie bei jedem beliebten Designtrend ermutige ich Sie, einen Schritt zurückzutreten, bevor Sie ihn auf Ihrer Website implementieren, und sich zu fragen: Wenn ich dies erstellen werde, welche Richtlinien für die Schaltfläche „Zurück nach oben“ muss ich befolgen?

*Anmerkung: Sie könnten argumentieren, dass Benutzer heutzutage darauf konditioniert sind, auf einer Seite nach unten (und wieder nach oben!) zu scrollen, was die „Notwendigkeit“ einer Zurück-nach-oben-Schaltfläche beseitigen würde. Mein Tipp: Testen Sie es! Fügen Sie ein Google Analytics-Ereignis bei Klick hinzu oder verwenden Sie ein Heatmap-Tool wie Hotjar, um zu sehen, wie Ihre Website-Besucher mit der Seite interagieren.

Die beste „Best Practice“, die Sie befolgen sollten, basiert auf Daten von Ihrer eigenen Website und Ihren Benutzern!

So fügen Sie Ihrer WordPress-Site einen klebrigen Back-to-Top-Button hinzu

In diesem Tutorial zeige ich Ihnen, wie Sie genau die Back-to-Top-Schaltfläche hinzufügen, die wir hier im Layout verwenden! Der einzige Unterschied besteht darin, dass wir unsere in einer klebrigen Kopfzeile oben auf dem Bildschirm platziert haben, anstatt in der unteren rechten Ecke. (Aber keine Sorge, es ist das gleiche Konzept!)

Pro-Tipp: Auch wenn dieses Tutorial nicht allzu fortgeschritten ist, empfehle ich dennoch, es auf einer Staging-Site oder in einer lokalen Umgebung auszuprobieren, sodass für Ihre Live-Site absolut kein Risiko besteht. Wenn Sie schnell eine einrichten müssen, sehen Sie sich Local an, eine kostenlose lokale WordPress-App, die unglaublich einfach zu bedienen ist.

Lass uns anfangen! Ich werde jeden Schritt des Prozesses durchgehen, und Sie können auch diesem Codepen von Josh Masen, dem Front-End-Ingenieur von Flywheel, folgen.

Sehen Sie sich die Pen ES6 Scroll-to-top-Schaltfläche von Josh Lawler (@joshuamasen) auf CodePen an.

Für dieses Tutorial für die klebrige Zurück-nach-oben-Schaltfläche verwenden wir drei Sprachen:

• HTML für das Markup zum Erstellen der Schaltfläche
• CSS, um die Schaltfläche zu gestalten und sie an Ihre Marke anzupassen
• JavaScript, damit es „funktioniert“ und das Verhalten der Schaltfläche definiert

Im HTML finden Sie die folgenden Zeilen:

<a class="top-link hide" href="" id="js-top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Back to top</span>
</a>

Dies wird Ihr klebriger Back-to-Top-Button sein! Sie können sehen, dass wir eine CSS-Klasse namens .top-link hinzugefügt haben und ein einfaches JavaScript verwenden, damit es funktioniert. Wir verwenden auch ein Inline-SVG für die Schaltfläche.

Neben einer SVG-Datei können Sie auch eine Bilddatei oder ein Schriftsymbol verwenden, um die Schaltfläche zu erstellen. Wir bevorzugen jedoch die SVG-Methode, weil:

1. Es wird bei unterschiedlichen Bildschirmgrößen nicht verpixelt, wie dies bei einem Rasterbild der Fall wäre.
2. SVGs werden universell in allen Browsern unterstützt. (Juhu, Benutzererfahrung!)
3. Es ist einfach, mit CSS zu stylen, sodass Sie alles daran ganz einfach ändern können.
4. Es benötigt nur eine Codezeile, wodurch es leicht und besser für die Leistung der Website ist.

Das letzte wirklich wichtige Stück, das Sie im HTML finden, ist diese Zeile:

<span class="screen-reader-text">Back to top</span>

Dies ist entscheidend für Benutzer, die mit Screenreadern arbeiten, und verbessert die Zugänglichkeit Ihrer WordPress-Site. (Stellen Sie es sich wie ein Alt-Tag für ein Bild vor, aber für Ihre Scroll-to-Top-Schaltfläche!)

Lassen Sie uns nun mehr über diese CSS-Klasse .top-link sprechen. Wir verwenden dies, um den Button tatsächlich zu stylen, und hier definieren Sie Eigenschaften, wie z. B. wie groß er sein wird, wie viel Polsterung um ihn herum sein soll, die Farbe usw.

.top-link {
  transition: all .25s ease-in-out;
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-flex;
  
 cursor: pointer;
 align-items: center;
 justify-content: center;
 margin: 0 3em 3em 0;
 border-radius: 50%;
 padding: .25em;
 width: 80px;
 height: 80px;
 background-color: #F8F8F8;

Hinweis: Wir verwenden Sass (eine Stylesheet-Sprache), um unser CSS etwas schneller zu schreiben. Erfahren Sie hier mehr über diesen Präprozessor.

Ein paar wichtige Teile aus diesem Ausschnitt: transition: all .25s ease-in-out ; steuert, wie „schnell“ Ihre Schaltfläche auf dem Bildschirm erscheint oder verschwindet, und position: fixed ; Dadurch bleibt die Schaltfläche an der gewünschten Stelle „kleben“.

Als Nächstes sehen Sie Regeln für .show und .hide . Wir verwenden JavaScript, um zwischen diesen Klassen zu wechseln, um dem Browser mitzuteilen, wann die Schaltfläche auf der Seite erscheinen soll (oder nicht).

  .show {
    visibility: visible;
    opacity: 1;
  }
  
  .hide {
    visibility: hidden;
    opacity: 0;
  }

Bevor wir uns mit JavaScript befassen, gibt es nur ein paar weitere Zeilen, die wir dem CSS hinzufügen werden.

svg {
 fill: #000;
 width: 24px;
 height: 12px;
}

&:hover {
 background-color: #E8E8E8;

 	svg {
	 fill: #000000;
	}
}

Diese Klassen stilisieren das SVG-Bild für den Pfeil selbst und teilen dem Browser mit, wie er die Schaltfläche anzeigen soll, wenn ein Benutzer darüber fährt.

Abschließend fügen wir etwas CSS hinzu, um den Text mit der Aufschrift „Zurück zum Anfang“ für Screenreader auszublenden.

// Text meant only for screen readers.
.screen-reader-text {
	position: absolute;
	clip-path: inset(50%);
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
	clip: rect(1px, 1px, 1px, 1px);

	&:focus {
		display: block;
		top: 5px;
		left: 5px;
		z-index: 100000; // Above WP toolbar
		clip-path: none;
		background-color: #eee;
		padding: 15px 23px 14px;
		width: auto;
		height: auto;
		text-decoration: none;
		line-height: normal;
		color: #444;
		font-size: 1em;
		clip: auto !important;
	}
}

Nun zum JavaScript! Wir werden dies tun, ohne jQuery zu laden, was dazu beiträgt, dass Ihr Code leicht und schnell zu laden ist.

Die erste Variable hilft dem Browser, die Schaltfläche zu finden.

// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');

Als Nächstes erstellen wir eine Funktion, die die Schaltfläche „Nach oben scrollen“ anzeigt, wenn der Benutzer über die Höhe des Anfangsfensters hinausscrollt.

const scrollFunc = () => {
  // Get the current scroll value
  let y = window.scrollY;
  
  // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
  if (y > 0) {
    scrollToTopButton.className = "top-link show";
  } else {
    scrollToTopButton.className = "top-link hide";
  }
};

Wir fügen auch einen Ereignis-Listener hinzu, der beobachtet, wie der Benutzer scrollt (damit wir wissen, wo er sich auf der Seite befindet).

window.addEventListener("scroll", scrollFunc);

Fast fertig! Als Nächstes müssen wir die Funktion definieren, die bewirkt, dass die Schaltfläche den Benutzer tatsächlich zum Anfang der Seite zurückführt. Dazu erstellen wir eine Variable für die Anzahl der Pixel, die wir vom oberen Rand der Seite entfernt sind. Wenn diese Zahl größer als 0 ist, setzt die Funktion sie auf 0 zurück und bringt uns nach oben!

Wir fügen hier auch eine kleine Animation hinzu, damit der Sprung nicht zu abrupt ist.

const scrollToTop = () => {
  // Let's set a variable for the number of pixels we are from the top of the document.
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // If that number is greater than 0, we'll scroll back to 0, or the top of the document.
  // We'll also animate that scroll with requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo takes an x and a y coordinate.
    // Increase the '10' value to get a smoother/slower scroll!
    window.scrollTo(0, c - c / 10);
  }
};

Zu guter Letzt müssen wir der Seite nur sagen, dass sie diese Funktion ausführen soll, wenn jemand auf unseren klebrigen Back-to-Top-Button klickt.

// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}

Weiter: Entdecken Sie die 19 WordPress-Plugins, die Entwickler lieben

Laden Sie dieses E-Book herunter, um eine Liste unserer am meisten empfohlenen Plugins für Entwickler zu erhalten! Wir haben festgestellt, dass all diese Plugins einfach zu bedienen, nicht zu leistungsintensiv auf Ihrer Website und einfach absolut zuverlässig sind.

Das ist es! Sie haben jetzt einen voll funktionsfähigen und anpassbaren Back-to-Top-Sticky-Button auf Ihrer WordPress-Site. Um das gesamte Tutorial in Aktion zu sehen, denken Sie daran, sich diesen Codepen von Flywheels eigenem Front-End-Ingenieur Josh Masen anzusehen!