Wie erstelle ich einen “Nach oben”-Button mit CSS und jQuery?

Wenn Ihr einen "Nach oben"-Button hinzufügen möchtet, während Ihr immer noch Eure Website gestaltet oder einfach nur neugierig seid, wie Ihr ihn auf eigene Faust bauen könnt, lest weiter!

Ein"Nach oben"-Button ist etwas, das viele von Euch auf vielen Webseiten gesehen habt. Es ist dieser Pfeil, der in der rechten unteren Ecke einer Webseite erscheint, wenn Ihr die Seite runtersgrollt. Wenn Ihr darauf klickt, bringt es Euch zurück zum Anfang der Seite.

Zurück zum Anfang

Unser Code wird aus zwei Teilen bestehen, dem CSS-Styling und einem kleinen jQuery-Skript. Beginnen wir mit CSS.

CSS Stile für den Button

Wir beginnen mit dem Erstellen von Stilen und Markup für unsere Schaltfläche. Hier ist der HTML-Teil:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<a id="button"></a>

Die Schaltfläche wird aus nur einem Anker-Tag mit einer ID-Taste bestehen. Wir haben auch einen Link zur FontAwesome Bibliothek, so dass wir ein Icon für unsere Schaltfläche verwenden können.

Die ersten Styles für den Button würden so aussehen:

#button {
  display: inline-block;
  background-color: #FF9800;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  margin: 30px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s;
  z-index: 1000;
}
#button:hover {
  cursor: pointer;
  background-color: #333;
}
#button:active {
  background-color: #555;
}

Da die Schaltfläche ein Ankerelement ist und Anker in der Regel Inline-Elemente sind, müssen wir die display Eigenschaft in den Inline-Block verwandeln, damit wir Dimensionen zuordnen können.

Lasst uns einen quadratischen Button von 50*50px mit abgerundeten Ecken von 4px machen. Wir verleihen ihm eine helle orange Farbe und einen Rand von 30px auf jeder Seite.

Die feste Position würde immer unseren Button veranlassen, an der gleichen Stelle zu bleiben, wenn wir die Seite runterscrollen und z-index mit einer sehr hohen Zahl stellt sicher, dass die Schaltfläche immer andere Website-Elemente überlappt.

Wenn wir mit der Maus über einen Button fahren, wechselt der Cursor zu einem Zeiger und der Hintergrund wird dunkelgrau. Um den Übergang glatt zu machen, weisen wir den Übergang von 0,3 Sekunden zur Hintergrundfarbe-Eigenschaft zu. Das heißt, wenn wir auf die Schaltfläche klicken, ändert sich auch die Hintergrundfarbe und wird etwas heller.

Hinzufügen eines Symbols

Im Moment ist unsere Schaltfläche leer, also lasst uns ein Symbol hinzufügen. Wir tun es, indem wir ein ::after Pseudoelement wie folgt hinzufügen:

#button::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}

Wir werden ein Icon aus der beliebtesten Font-Bibliothek FontAwesome auswählen. Ich beschloss, das Chevron Up Icon zu wählen.

Um es in einem Pseudo-Element anzuzeigen, setzen wir die font-family auf FontAwesome und weisen den Unicode-Wert des Symbols der content Eigenschaft zu.

Stellt außerdem sicher, dass Eure Zeilenhöhe mit der Höhe Eures Symbols gleich ist, wenn Ihr es horizontal zentrieren möchtet.

Funktionalität mit jQuery hinzufügen

In diesem Unterabschnitt werde ich Euch zeigen, wie man den Button so einstellt, damit er richtig funktioniert. Der einfachste Weg, dies zu erreichen, ist die Verwendung einer JavaScript-Bibliothek jQuery. Zuerst müssen wir jQuery zum HTML-Markup unseres Codes hinzufügen. Fügt diese Codezeile kurz hinzu, bevor Ihr body Tag schließt.

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>

Jetzt können wir unser Skript mit jQuery-Syntax schreiben. Fügt nach der jQuery-Zeile das folgende Skript hinzu:

<script>

jQuery(document).ready(function() {
  
  var btn = $('#button');

  $(window).scroll(function() {
    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }
  });

  btn.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({scrollTop:0}, '300');
  });

});

</script>

Schauen wir uns dieses Skript genauer an.

Hier die erste Zeile des Codes:

jQuery(document).ready(function() {

Im Grunde funktioniert der Code innerhalb dieser Funktion nur dann, wenn das Dokument vollständig geladen ist. Dies ist eine gute Möglichkeit, Fehler zu vermeiden, falls Ihr JavaScript-Code Änderungen an bestimmten Abschnitten einer Webseite vornehmen möchtet, die nicht vollständig im Browser geladen sind.

Der Code, den wir nach dem Dokument laufen lassen, ist voll geladen. Es besteht aus zwei Hauptblöcken, bei denen jeder seine eigene Sache macht.

Der erste Teil des Skripts macht unseren Button erscheinen und verschwinden, nachdem das Scrollen einen bestimmten Punkt erreicht hat. Der zweite Teil lässt die Seite nach oben scrollen, nachdem wir auf die Schaltfläche geklickt haben. Lasst uns jetzt jeden einzelnen Teil im Detail untersuchen.

Den Button erscheinen und verschwinden lassen

Dies ist der Code, der den Trick ausmacht:

 var btn = $('#button');

  $(window).scroll(function() {
    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }
  });

Zuerst stellen wir eine Variable btn fest und weisen sie einem Element mit einer ID von button zu, so dass es einfacher für uns ist, es später im Code zu verwenden.

Auch  hilft dies JavaScript, die Berechnungen schneller zu machen. Sobald wir das Element in einer Variablen speichern, muss JavaScript nicht mehr die ganze Seite jedes Mal durchsuchen , wenn wir es wieder in unserem Code verwenden müssen.

.scroll()

JQuery hat eine praktische Funktion .scroll(). Seine Aufgabe ist es, ein Stück Code zu binden, das jedes Mal ausgeführt wird, wenn das Scrollen auf Eurer Webseite geschieht. Es braucht einen Parameter, der eine Funktion ist, die jedes Mal ausgeführt wird, wenn Ihr eine Seite runterscrollt. Obwohl Ihr es für ein beliebiges scrollbares Element anwenden könnt, z. B. Frames und Elemente mit Overflow-Eigenschaft, wenden wir es normalerweise an das Fensterelement an, da das Scrollen dort in den meisten Fällen erfolgt, einschließlich unseres Beispiels.

$(window).scroll(function() {

Innerhalb der Funktion platzieren wir diese Wenn-Sonst-Anweisung:

    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }

Was wir hier versuchen zu tun, ist die vertikale Position der Bildlaufleiste zu überprüfen, damit unsere Schaltfläche erscheint, wenn es unter einem bestimmten Punkt ist und verschwindet, wenn es über diesem Punkt ist.

Um die aktuelle Position der Bildlaufleiste zu erhalten, werden wir eine eingebaute jQuery-Methode verwenden .scrollTop(). Es übernimmt keine Parameter und gibt einfach eine Anzahl von Pixeln zurück, die über dem scrollbaren Bereich verborgen sind.

Also, jedes Mal, wenn wir scrollen, überprüft JavaScript, wie viele Pixel versteckt sind und vergleicht sie mit einer Zahl. In unserem Fall stelle ich diese Zahl auf 300, aber Ihr könnt es ändern, wenn Ihr wollt.

Wenn wir mehr als 300px wählen, dann fügen wir show zu unserem Button-Element, damit es erscheint. Wenn die Zahl kleiner als 300 ist, entfernen wir diese Klasse. Hinzufügen und Entfernen von Klassen ist ein weiterer Grund, warum jQuery so beliebt ist. Wir können es mit zwei einfachen Methoden tun - addClass() und removeClass().

Allerdings haben wir noch keine show Klasse in unserem CSS, also lasst uns es hinzufügen:

    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }

Standardmäßig wird unsere Schaltfläche ausgeblendet, also müssten wir dem button Element noch ein paar Regeln hinzufügen:

#button {
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
}

Um den Übergang glatt zu machen, habe ich dem Übergangsattribut noch zwei weitere Werte hinzugefügt und die Deckkraft und die Sichtbarkeit auf 0,5 Sekunden eingestellt.

Nach oben scrollen

Der zweite Teil des Skripts ermöglicht es Euch, zum Seitenanfang zu springen, nachdem Ihr auf die Schaltfläche geklickt habt.

  btn.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({scrollTop:0}, '300');
  });

Die erste jQuery-Methode, die wir hier sehen, ist on(). Sein erster Parameter ist das 'Klick' JavaScript Event, das jedes Mal auftritt, wenn wir in unserem Browser einen Mausklick machen. Der zweite Parameter ist eine Handler-Funktion, die ausgelöst wird, sobald das Ereignis auftritt.

Die Handler-Funktion übernimmt einen Event-Parameter. Wir können es nennen, wie auch immer wir es wollen, aber meist e oder event werden bevorzugt. Wir benötigen den Event-Parameter, um ihn an die Funktion weiterzugeben und für die preventDefault() Methode zu verwenden.

Die Methode e.preventDefault() verhindert, dass die Standardaktion des Ereignisses geschieht, z.B. ein Link führt uns nicht zur nächsten Seite. In unserem Fall ist es nicht entscheidend, denn unserem Anker-Element das href Attribut fehlt und es würde uns sowieso nicht auf eine neue Seite bringen, aber es ist immer besser, nachzuprüfen.

.animate()

Die jQuery .animate() Methode macht das ganze Ding:

    $('html, body').animate({scrollTop:0}, '300');

Der erste Parameter der .animate() Methode ist die Liste der Eigenschaften, die wir animieren sollten. Unsere Eigenschaft heißt scrollTop und wir wollen, dass es einen Wert von 0 hat. Der Typ dieses Parameters ist ein einfaches Objekt und deshalb müssen wir geschweifte Klammern verwenden und unsere Werte mit dem Schlüssel/Wert-Paar-Syntax notieren.

Der zweite Parameter ist die Geschwindigkeit, mit der wir unsere Animation laufen lassen wollen. Es wird in Millisekunden gemessen und je höher die Zahl, desto langsamer ist die Animation. Der Standard ist 400, aber ich habe ihn auf 300 gestellt.

Schließlich wenden wir die animierte Methode für die HTML- und Body-Elemente auf unserer Webseite an. Jetzt jedes Mal, wenn wir auf die Schaltfläche klicken, wird es uns zum Seitenanfang der Seite bringen.

Demo

Das Endergebnis könnt Ihr in dieser CodePen Demo sehen. Ich habe außerdem einen Beispieltext für Demonstrationszwecke eingesetzt.

See
the Pen <a href="http://codepen.io/matthewcain/pen/ZepbeR/">Back
to Top Button</a> by Matthew Cain (<a
href="http://codepen.io/matthewcain">@matthewcain</a>) on <a
href="http://codepen.io">CodePen</a>.<br />

 Zum Schluß

"Nach oben"-Buttons stellen ein großartiges Usability-Element auf einer Webseite dar und wenn Ihr dieses kleine, aber hilfreiche Detail auf Ihre Website einbringt, wird es sicher Eure Benutzererfahrung verbessern.  Hoffentlich hat dieser Leitfaden Euch geholfen, Euer CSS- und JavaScript-Wissen zu erweitern und eventuell sogar einige "Aha"-Erlebnisse beschert, die für ambitionierte Webdesigner und Entwickler so nützlich sein können.

Der Artikel ist ursprünglich auf dem TemplateMonster.com-Blog erschienen und wurde aus dem Englischen übersetzt