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 & Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Online-Schulungen (remote per Video)

Inhouse-Schulungen

Öffentliche Schulungstermine

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

6 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

  2. Winiger

    Verfasst am 14. Januar 2020 um 10:10 Uhr.

    Könnte mir vielleicht jemand erkläre WO GENAU ich dieses Skript einfügen muss? Einfach ganz oben vor dem HTML Code eines Blocks…? Oder wo genau?
    Herzlichen Dank im Voraus für eure Unterstützung!

    • Jonas Hellwig

      Verfasst am 14. Januar 2020 um 13:34 Uhr.

      Sofern jQuery in der Seite bereits eingebunden wurde, muss das o.g. Snippet direkt darunter in einem <script> … </script>-Block eingefügt werden.

      • Martina Winiger

        Verfasst am 15. Januar 2020 um 20:11 Uhr.

        Hallo Jonas
        Ich in da totale ANfängerin….ich weiss nicht mal was ein JQuery ist, oder wo ich das her bekomme, und wo ich das einbauen kann….könntest du mir dazu vielleicht links oder Erklärungen geben? Vielen Dank!!

      • Robert Menzel

        Verfasst am 16. Januar 2020 um 10:00 Uhr.

        Hallo Martina,
        jQuery ist ein Javascript-Framework.
        Folgender Link sollte dir weiterhelfen: https://www.javascript-kurs.de/jquery-tutorial.htm
        Viele Grüße
        Robert

Schreibe einen Kommentar zu Jonas Hellwig Antworten abbrechen

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.