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.

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

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

CSS

#btn-back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
}

JS

//Get the button
let mybutton = document.getElementById("btn-back-to-top");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction();
};

function scrollFunction() {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
mybutton.addEventListener("click", backToTop);

function backToTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}

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