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

Veröffentlicht: 2023-02-12

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.

DER.

WEG.

ZU.

DER.

SPITZE.

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 haben uns die Best Practices für modernes Webdesign 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.

Dinge, die vor dem Hinzufügen einer Zurück-nach-oben-Schaltfläche zu beachten sind

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?

Hier sind ein paar Fragen, die Sie beantworten müssen, bevor Sie Ihre Scroll-to-Top-Schaltfläche erstellen:

  • Wo wird es platziert?
  • Wie groß (oder klein) soll es sein?
  • Welchen Designmustern sollten Sie folgen, damit es bei der Marke bleibt? (Denken Sie an Farben, Schriftarten, Symbole usw.)
  • Besteht die Gefahr, dass wichtige Website-Inhalte, wie z. B. Informationen in einer Seitenleiste, verdeckt werden?
  • Was passiert auf Mobilgeräten? Wird es ansprechbar sein?
  • Brauchst du es wirklich?*

*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.

Oder sehen Sie sich dieses Video-Tutorial zum Hinzufügen einer klebrigen Zurück-nach-oben-Schaltfläche an!

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 verstecken" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Zurück nach oben</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">Zurück nach oben</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 {
  Übergang: alle .25s Ease-in-out;
  Position: fest;
  unten: 0;
  rechts: 0;
  Anzeige: Inline-Flex;
  
 Cursor: Zeiger;
 Ausrichtungselemente: Mitte;
 justify-content: center;
 Rand: 0 3em 3em 0;
 Grenzradius: 50 %;
 Polsterung: .25em;
 Breite: 80px;
 Höhe: 80px;
 Hintergrundfarbe: #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).

 .zeigen {
    Sichtbarkeit: sichtbar;
    Deckkraft: 1;
  }
  
  .verstecken {
    Sichtbarkeit: versteckt;
    Deckkraft: 0;
  }

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

 SVG {
 füllen: #000;
 Breite: 24px;
 Höhe: 12px;
}
&:schweben {
 Hintergrundfarbe: #E8E8E8;
 	SVG {
	 füllen: #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.

 // Nur für Screenreader gedachter Text.
.Screenreader-Text {
	Position: absolut;
	Beschneidungspfad: Einfügung (50 %);
	Rand: -1px;
	Grenze: 0;
	Polsterung: 0;
	Breite: 1px;
	Höhe: 1px;
	Überlauf versteckt;
	Zeilenumbruch: normal !wichtig;
	Clip: Rechteck (1px, 1px, 1px, 1px);
	&:Fokus {
		Bildschirmsperre;
		oben: 5px;
		links: 5px;
		Z-Index: 100000; // Über der WP-Symbolleiste
		Beschneidungspfad: keiner;
		Hintergrundfarbe: #eee;
		Polsterung: 15px 23px 14px;
		Breite: automatisch;
		Höhe: automatisch;
		Textdekoration: keine;
		Zeilenhöhe: normal;
		Farbe: #444;
		Schriftgröße: 1em;
		clip: auto !wichtig;
	}
}

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.

 // Setze eine Variable für unser 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 = () => {
  // Holen Sie sich den aktuellen Scroll-Wert
  let y = window.scrollY;
  
  // Wenn der Scroll-Wert größer als die Fensterhöhe ist, fügen wir eine Klasse zur Scroll-to-Top-Schaltfläche hinzu, um dies anzuzeigen!
  wenn (y > 0) {
    scrollToTopButton.className = "Top-Link-Anzeige";
  } anders {
    scrollToTopButton.className = "top-link verstecken";
  }
};

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 = () => {
  // Legen wir eine Variable für die Anzahl der Pixel fest, die wir vom oberen Rand des Dokuments entfernt sind.
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // Wenn diese Zahl größer als 0 ist, scrollen wir zurück zu 0 oder zum Anfang des Dokuments.
  // Wir werden diese Schriftrolle auch mit requestAnimationFrame animieren:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  wenn (c > 0) {
    window.requestAnimationFrame (scrollToTop);
    // ScrollTo nimmt eine x- und eine y-Koordinate.
    // Erhöhen Sie den Wert '10', um einen flüssigeren/langsameren Bildlauf zu erhalten!
    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.

 // Wenn auf die Schaltfläche geklickt wird, führe unsere ScrolltoTop-Funktion oben aus!
scrollToTopButton.onclick = Funktion(e) {
  e.preventDefault();
  Scrolle nach oben();
}

Das ist es! Sie haben jetzt einen voll funktionsfähigen und anpassbaren Back-to-Top-Sticky-Button auf Ihrer WordPress-Site.