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.

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

Geschrieben von Robert Menzel

Benutzerbild

Robert arbeitet als Frontend-Developer und Web-Designer bei kulturbanause. Zu seinen Aufgaben gehören die visuelle Gestaltung und die technische Umsetzung von Websites, eCommerce-Shops oder dessen Kombination. Besonders gerne übernimmt er die Entwicklung individueller und anspruchsvoller Websites mit umfangreichen ineinandergreifenden Funktionen, getreu dem Motto: »Der beste Lack bringt nichts, wenn die Maschine darunter nicht läuft.«

Feedback & Ergänzungen – 11 Kommentare

  1. Chris
    schrieb am 15.07.2022 um 10:58 Uhr:

    Hi Robert,
    danke für den coolen Code. Wie müsste der angepasst werden,
    damit es horizontal zum Anker scrollt?

    LG
    Chris

    Antworten
    • Robert Menzel
      schrieb am 12.08.2022 um 07:33 Uhr:

      Hallo Chris,
      das kann ich dir so einfach leider nicht beantworten.
      Vielleicht hat die Community ja eine Antwort auf deine Frage.

      Viele Grüße
      Robert

      Antworten
  2. Radbaron
    schrieb am 07.09.2021 um 07:04 Uhr:

    Hallo Robert,

    hast Du dieses Skript zufälligerweise mal erweitert so dass der Anwender, wenn er von einer anderen Seite direkt mit einem Ankerlink kommt, nicht sofort beim Anker „hart“ landet (so ist es leider momentan wenn man den Link zum Beispiel direkt aufruft: https://media.kulturbanause.de/2017/09/smoothscroll.html#section-three) sondern dass die Seite aufgerufen wird und die Seite dann smooth von oben zum Anker scrollt?
    Evtl. hat auch jemand anders das schon erweitert. Ansonsten wäre ich für einen Tipp dankbar wie das zu realisieren ist. Danke ;)

    Antworten
  3. Martina Winiger
    schrieb am 18.01.2020 um 18:57 Uhr:

    Oh…danke für diesen Link. Hab das alles durchgelesen und zwar (glaub ich) einigermassen verstanden. trotzdem weiss ich jetzt nicht, WO GENAU ich dieses jQuery einfügen muss. In die „erste Zeile“? Und dann dort darunter das Smooth scroll Skript?
    Vielleicht kennt ihr das Worldsoft CMS…ich arbeite damit…. Danke im Voraus für weitere Ausführungen…! :-)

    Antworten
    • Robert Menzel
      schrieb am 03.08.2020 um 10:40 Uhr:

      Hallo Martina,
      das jQuery-Script muss zuerst geladen werden, anschließend dsa Script von uns.
      Wir kennen das Worldsoft CMS leider nicht, wenn es jedoch schon jQuery mitbringt, muss nur unser Code in einem Script darunter integriert werden.

      Viele Grüße
      Robert

      Antworten
  4. Winiger
    schrieb am 14.01.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!

    Antworten
    • Jonas Hellwig
      schrieb am 14.01.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.

      Antworten
      • Martina Winiger
        schrieb am 15.01.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
        schrieb am 16.01.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

  5. Sven
    schrieb am 04.07.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.

    Antworten
    • Robert Menzel
      schrieb am 10.07.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

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →