Kleine Skript-Sammlung für Webdesigner - Langsames Scrollen (Smooth Scroll)

Beitragsseiten

In diesem Artikel beschreiben wir ein Beispiel zum Einfügen von "Smooth Scroll" auf der eigenen Webseite. Gerade beim Springen zu Ankerpunkten oder beim Einbinden eines "Nach oben" Buttons ist es wesentlich schöner wenn die Webseite sich zum entsprechenden Punkt Scrollt und nicht springt.

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;
}
}
});
});

Weiterführende Links

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

  • Erstellt am .

Unsere Kompetenzen


Alexander´s Webdesign

Mosebergstraße 1
37441, Bad Sachsa

+49-(0)-5523-952 89 98
+49-(0)-160-932 435 66
Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!

Montag - Freitag 09:00 - 18:00 Uhr

Kundenstimmen

So bewerten uns unsere Kunden.

4.8 / 5 Sternen

4.8 / 5 bei 106 Stimmen

Alle Bewertungen


  • Folgen Sie uns

Copyright © 2003 - 2020 Alexander´s Webdesign - Alle Rechte vorbehalten.