Animiertes Scrolling (Smooth Scrolling) mit jQuery
In diesem Beitrag findet ihr ein jQuery-Snippet, mit dem ihr Smooth Scrolling integriert und somit animiert zu Sprungmarken scrollen könnt.

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;
});
});
Hi Robert,
danke für den coolen Code. Wie müsste der angepasst werden,
damit es horizontal zum Anker scrollt?
LG
Chris
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
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 ;)
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…! :-)
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
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!
Sofern jQuery in der Seite bereits eingebunden wurde, muss das o.g. Snippet direkt darunter in einem <script> … </script>-Block eingefügt werden.
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!!
Hallo Martina,
jQuery ist ein Javascript-Framework.
Folgender Link sollte dir weiterhelfen: https://www.javascript-kurs.de/jquery-tutorial.htm
Viele Grüße
Robert
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.
Hallo Sven,
vielen Dank für deinen Hinweis. Wir haben es geprüft und den Code entsprechend angepasst.
Liebe Grüße Robert