Smooth Scrolling in der eigenen Website einzubinden ist heutzutage sehr einfach möglich, da die nötigen Funktionen inzwischen nativ in JavaScript und die meisten Browser integriert sind.

Smooth Scrolling ist ein wichtiger Bestandteil des Designs moderner Websites

Inhalt

  1. Was ist Smooth Scrolling?
  2. Smooth Scrolling in Website einbinden

Was ist Smooth Scrolling?

Smooth Scrolling meint einen flüssige „springen“ oder „scrollen“ zu einem bestimmten Anker oder „Ort“ auf einer Website. Klickts du zum Beispiel oben im Inhaltsverzeichnis auf eine der Überschriften scrollt die Website automatisch zum entsprechenden Kapitel – und das nicht als sofortigen Sprung, sondern als flüssige Scroll-Bewegung. Probiere es doch gleich mal aus indem du hier klickst.

Smooth Scrolling einbinden

Füge den folgenden Code (JavaScript) in den Footer deiner Website (also unterhalb des Hauptteils deiner Website, am Ende des Codes) ein:

JavaScript

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (scroll) {
    scroll.preventDefault();
    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth'
    });
  });
});Code-Sprache: JavaScript (javascript)

Das geht z.B. direkt im HTML indem du den Code zwischen <script>-tags platzierst.

HTML

<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (scroll) {
    scroll.preventDefault();
    document.querySelector(this.getAttribute('href')).scrollIntoView({
      behavior: 'smooth'
    });
  });
});
</script>Code-Sprache: HTML, XML (xml)