kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Animiertes Scrolling (Smooth Scrolling) mit jQuery

Die Verwendung von Sprungmarken (Ankern) kann deutlich zur Verbesserung der Benutzerfreundlichkeit von Webprojekten beitragen und findet daher häufige Anwendung. Anker werden unter anderem in Inhaltsverzeichnissen, für »Zurück nach oben«-Buttons oder zur Navigation auf One-Pagern verwendet. Leider springt der Anwender bei einem Klick auf die Sprungmarke schlagartig zum Ziel – was die Orientierung und die User Experience beeinträchtigen kann. In diesem Beitrag archivieren wir ein Snippet, mit dem ihr das Verhalten durch ein animiertes Scrollen (Smooth Scrolling) ersetzen könnt.

Workshops und Seminare von kulturbanause

Adobe XD, Performance, Responsive Design, Sketch, Visual Prototyping, Web Animationen, Corporate Design …

Jetzt Frühbucher-Rabatte sichern!

Smooth Scrolling mit Hilfe von jQuery

Mit Hilfe des folgenden jQuery-Snippets scrollt der Anwender nach dem Klick auf einen Anker-Link animiert zum Ziel. Dieses Verhalten wird auch als »Smooth Scrolling« bezeichnet.

Die Animation ist nicht nur optisch ansprechender, sie steigert auch die Benutzerfreundlichkeit. Der Anwender versteht intuitiv, dass keine neue Seite geladen wurde, sonder dass er auf der gleichen Seite an eine andere Stelle springt, und dass diese sich entweder oberhalb oder unterhalb seines Ausgangspunktes befindet.

$('a[href^="#"]').on('click',function(e) {
 e.preventDefault();
 var target = this.hash;
 var $target = $(target);
 $('html, body').stop().animate({
  'scrollTop': $target.offset().top
 }, 900, 'swing', function () {
  window.location.hash = target;
 });
});

Beispiel anschauen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

2 Kommentare

  1. Sven

    Verfasst am 4. Juli 2019 um 13:44 Uhr.

    Im jQuery Selector in Zeile 1 sollte das * zu einem ^ geändert werden. Ansonsten funktionieren Links, die mit einem Anker auf eine andere Unterseite weiterleiten nicht mehr. Somit ist gegeben, dass nur ein Link der im href mit „#“ beginnt, die Scrollanimation bekommt.

    • Robert Menzel

      Verfasst am 10. Juli 2019 um 12:44 Uhr.

      Hallo Sven,
      vielen Dank für deinen Hinweis. Wir haben es geprüft und den Code entsprechend angepasst.
      Liebe Grüße Robert

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.