Langsames Scrollen (Smooth Scroll) auf Websites

Der Folgende Beispielcode ist für das langsame Scrollen aller Links die zu einem Anker auf der Seite führen. Das Scrollen funktioniert in beide Richtungen also auch nach oben.

Zu Beachten ist dabei folgendes:

  1. Alle Links zu einem Anker auf der Seite beginnen mit # und es findet keine Unterscheidung statt ob nun langsam gescrollt werden soll oder nicht.
  2. Es muss mindestens jQuery in der Version 1.10.2 in die Seite eingebunden sein.
  3. Die Scrollgeschwindigkeit kann angepasst werden, wenn die "1000" geändert wird. Es handelt sich dabei um die Zeit in Millisekunden in denen der nächste Punkt erreicht wird.
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});

Verwandte Themen

Weiterführende Links

Ein Beispiel für langsames Scrollen: https://css-tricks.com/examples/SmoothPageScroll/

Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden.
Weitere Informationen Ok