Bootstrap 5 Back to Top Button

Ein kleines Tutorial wie man seinen Besuchern eine unkomplizierte Option bietet, um mühelos zum Anfang (nach oben) der Webseite zurückzukehren. Mit Bootstrap 5 kannst du ganz einfach einen Scroll Back To Top Link erstellen. 

Sobald der Nutzer eine bestimmte Anzahl von Pixeln gescrollt hat, erscheint eine Schaltfläche, die ihn mit nur einem Klick wieder an den Anfang der Seite bringt. Diese Komponente zusammen mit der "Smooth scroll" Funktion verwenden macht das Scrollen wesentlich schöner. Das Script verzichtet auf Jquery oder andere externe Javascript Bibliotheken.

Beispiel

Die Bedingung für das Einblenden des Buttons kann im JavaScript-Code angepasst werden. In diesem Beispiel habe ich einen Wert von 20 Pixeln gewählt.

HTML

Der Button muss direkt am Ende der Seite vor dem schließenden </body> eingefügt werden.

 

<button type="button" class="btn btn-danger btn-floating btn-lg" id="btnbacktotop">
  <i class="fas fa-arrow-up"></i>
</button>

 

CSS

 

#btnbacktotop {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
}

 

JS

 

document.addEventListener("DOMContentLoaded", function() {
    const backToTopBtn = document.getElementById("backToTopBtn");
    window.addEventListener("scroll", function() {
      if (window.scrollY > 50) {
        backToTopBtn.style.display = "block";
      } else {
        backToTopBtn.style.display = "none";
      }
    });
    backToTopBtn.addEventListener("click", function() {
      window.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    });
  });

Quelle

https://mdbootstrap.com/docs/standard/extended/back-to-top/