Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

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

thumb

Robert arbeitet als Frontend-Developer und Web-Designer bei kulturbanause®. Zu seinen Aufgaben gehören die Gestaltung und die technische Umsetzung von Websites mit Photoshop, Illustrator, WordPress, PHP, HTML, CSS (Sass) und JavaScript (jQuery). Besonders gerne übernimmt er die Erstellung individueller und anspruchsvoller WordPress-Themes mit umfangreichen ineinandergreifenden Funktionen.

Feedback & Ergänzungen – 9 Kommentare

  1. 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
  2. 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 (Autor)
      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
  3. 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 (Autor)
        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

  4. 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 (Autor)
      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

Schreibe einen Kommentar zu Martina Winiger Antworten abbrechen

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 →