Smooth Scroll – elegantes Scrollen mit Jquery

Update zum Thema Smooth Scroll
Im Artikel „Back-to-Top Buttons mit Smooth Scroll und Fading in WordPress verwenden“ findest du eine aktuellere Bearbeitung zum Thema Smooth Scroll. Außerdem wird hier noch ein praktischen WordPress-Plugin vorgestellt. Schau doch mal rein!

Um auf längeren Webseiten wieder zum Seitenanfang zu gelangen, oder um zwischen verschiedenen Elementen einer Seite hin und her zu scrollen, setzt man Ankerpunkte (z.B. #top). Um die normalerweise abrupten Seiten-Scrolls zu verschönern, kann man mit Hilfe der Javascript-Library Jquery sogenannte Smooth-Scrolls (seichte Scrolls) einsetzen.

Eine Demo eines solchen Smooth-Scrolls kannst du dir auf der Webseite CSS-Tricks ansehen.

Und so integrierst du den Smooth-Scroll Effekt auf deiner eigenen Webseite:

1. Setzte deine Ankerpunkte, z.B. ganz oben auf deiner Seite:
<a name="top" id="top"></a>
2. JQeury downloaden

Auf der JQuery-Webseite findest du die neusten Versionen der JQeury-Library zum runterladen. Downloade JQuery, und lade es in einem Ordner auf deinem Server hoch. Rufe dann die QJuery-Library im head-Tag deiner Webseite auf. Alternativ kannst du auch direkt auf die JQuery-Library auf dem Google-Server linken:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
3. Javascript Code einfügen

Speicher folgenden Code in eine Javascript-Datei mit dem Namen »smoothscroll«, und lade diese ebenfalls in deinen js-Ordner:

$(function(){
    $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        &amp;amp;&amp;amp; location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length &amp;amp;&amp;amp; $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({scrollTop: targetOffset}, 1000);
                return false;
            }
        }
    });
});
4. Code im head-Tag aufrufen

Um den SmoothScroll-Code auf deiner Webseite aufzurufen, fügst du jetzt noch folgenden Code in den Head-Tag ein:

<script type="text/javascript" src="js/smoothscroll.js"></script>

Und das war’s auch schon! Linkst du jetzt von einem Punkt deiner Webseite auf den Ankerpunkt #top, scrollt deine Seite elegant nach oben.

Ich finde den Smooth-Scroll eine sehr elegante und benutzerfreundliche Methode, um auf einer Webseite zu navigieren. Die SmoothScroll-Methode ist z.B. auch bei Single-Page-Webseiten besonders gefragt. Hier ein besonders schönes Beispiel!

Kennst du weitere schöne Webseiten mit tollen Scroll-Effkten? Welche Javascript-Effekte gefallen dir besonders? Schreib mir doch einen Kommentar, ich freue mich schon auf dein Feeback!

39 Kommentare

  1. Ja dieses Smooth Scrollen gefällt mir. Habe da auch auf meiner Site etwas eingebaut vor einiger Zeit. Einfach ein „Scroll to Top“ wenn man nach unten scrollt. :) !

  2. Hallo Dave,

    vielen Dank für deinen Kommentar! Hey, das Scroll to Top auf deiner Seite sieht super aus :-) Mir gefällt das SmoothScrollen auch soooooooo viel besser!

    Gruß Ellen

  3. Schon wieder was gelernt :) Ein sehr schöner Effekt! Und wenn du beschreibst, wies geht, dann versteh ich das sogar. Vielen Dank für die hilfreiche Erklärung.

  4. Hihi ;-) Vielen lieben Dank für deinen lieben Kommentar, Barbara! Die SmoothScrolls sind wirklich sehr leicht in eine Webseite einzubauen, aber der Effekt ist super angenehm!

  5. Hi Ellen,

    super erklärt aber in der smoothscroll.js hast du ein Fehler bzw ein Zeichen vergessen:

    Geschrieben hast du:
    $target = $target.length && $target || $(‚[name=‘ this.hash.slice(1) ‚]‘);

    heißen muss es:
    $target = $target.length && $target || $(‚[name=‘ + this.hash.slice(1) +‘]‘);

    es fehlt ein „+“ damit es funktioniert.

    Gruß Jannis

  6. Hallo Jannis,

    vielen Dank für deinen Kommentar und für deinen wichtigen Hinweis. Sorry, dass ich den Code erst jetzt verbessert habe. Jetzt sollte es aber auf alle Fälle funktionieren :-)

    Gruß Ellen

  7. Habe gerade versucht es auf meiner Seite einzubinden, aber es funktioniert immer noch nicht. Nur so als kleiner Hinweis ;)

    _______________________________________________

    $(function(){

    $(‚a[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) {

    var targetOffset = $target.offset().top;

    $(‚html,body‘).animate({scrollTop: targetOffset}, 1000);

    return false;

    }

    }

    });

    });

    ________________________________________________

    Damit hat es dann geklappt.

    Grüße,Giulia

    • Hallo Giulia,

      vielen herzlichen Dank für deine Hilfe und den Code-Schnipsel :-) Ich werde den Artikel auf jeden Fall gleich am Wochenende updaten, so dass die Anleitung wieder funktioniert.

      1000 Dank und viele Grüße,
      Ellen

  8. Hallo,

    bin jetzt schon länger begeisterter Leser Eurer Seite und mich würde auch brennend interessieren, wie ich den INHALT eines DIV’s (in meinem Fall der des „content“-Div’s im twentyten-Theme) mit Buttons nach oben und unten scrollen kann…

    Beisse mir so langsam die Zähne aus :)

    Viele Grüße
    Oliver

  9. Danke für die Anleitung hier des ScrollTops , bin in jQuery teilweise doch noch nicht so frisch , so konnte ich noch ein wenig was über CSS Seleketoren von jQuery in Erfahrung bringen.

    Ich hoffe Du nimmst mir das nun nicht übel ich hab deinen Code noch ein wenig vereinfacht und gleich noch gekürzt.

    $(function(){
    $(‚a[href*=#]‘).click(function(evt) {
    evt.stopPropagation();
    var target = this.href.match(/[^#]+$/)[0];
    var offset = jQuery(‚a[name=’+target+‘]‘).offset().top;
    $(‚html,body‘).animate({scrollTop: offset}, 1000);
    })
    });

    Okay gut er prüft nun nicht unbedingt ab ob es das Element gibt , aber ich denk mal einer der sich eine Webseite baut sollte schon darauf achten das es nicht ins Nirgendwo hin verweist ;)

    Eine schöne Woche wünsch ich noch ,

    MfG Ralf

    • Da ist mir glatt ein Fehler unterlaufen , statt evt.stopPropagation() muss es natürlich evt.preventDefault() heißen damit die Standartausführung des Links abgebrochen wird.

  10. Hallo Ellen,

    vielen Dank für diesen tollen Beitrag. Habe ich direkt bei mir eingebaut und hat auf Anhieb funktioniert.

    Herzliche Grüße
    Klaus

  11. Hallo,

    wow danke für das tolle Tutorial! Ich suche schon lange nach diesem Effekt, finde aber nicht so richtig etwas brauchbares!

    Allerdings funktioniert es bei mir leider nicht, mir wird gesagt, dass in dieser Zeile ein Syntaxfehler liegt?

    &amp;&amp; location.hostname == this.hostname) {

    würde mich über Infos freuen!

  12. Hallo mr92,

    dieser Fehler schleicht sich ein, wenn man den Code oben per Clipboard-Kopierbutton abholt. Ersetze die umgewandelten & in einfache &, d.h. in der if-Kondition die Bedingungen immer mit && trennen.

  13. Hallo,
    hab versucht jeden Code der hier gepostet wird zu verwenden. Leider zeigt es mir bei jedem eine Fehlermeldung an und ich weis nicht wie man die beheben kann. Kann mir da vielleicht einer weiterhelfen??

  14. Danke für die Anleitung, für mich wäre da aber eines ganz wichtig: Ist es irgendwie möglich den Tag am Ende der URL zu entfernen? Also das „#ID-Name“…?

    Grund ist der, dass der Facebook Share Count des jeweiligen Artikel sonst immer von einer unterschiedlichen URL ausgeht und damit Shares unter den ID’s aufgeteilt werden… :-(

  15. daniela 8. Mai 2012

    Ich bin gerade dabei eine seite zu erstellen

    die mit jquery plugin localscroll-min.js und scrollTo-min.js funktioniert.

    Horizontal läuft die Seite mit ankerpunkten.

    Die Divs sind nebeneinander gefloatet.

    Mein Problem ist, ich hätte es gern wie auf dieser homepage

    http://studio8169.com/?page_id=11

    das meine div mittig in der Seite positionert werden.

    mein Ankerpunkt liegt im Div links oben und dadurch fängt mein div links aussen am browser rand an, sobald ich verlinkt werde.

    Löse ich das im css oder mit einem javascript Befehl??Oder wie muss ich den ankerpunkt setzen?

    Den code habe ich von dieser Seite…
    http://www.thewebsqueeze.com/web-design-tutorials/create-a-horizontal-scrolling-website.html

  16. Hi Ellen, der Link zum schönen Beispiel geht leider nicht mehr. Ich suche auch ein schönes Scroll Script, welches aber vor dem Anchor etwas abbremst bzw. langsamer wird bevor es anhält. Cheers – Oli

  17. Hallo Ellen,

    würde das super gerne in meine Seite einbauen, doch es funktioniert nicht.
    Es wird mir angezeigt, dass in dieser Zeile ein Syntaxfehler liegt, den ich aber nicht (er)kenne:

    &amp;&amp; location.hostname == this.hostname) {

    Hm…

    • Hat sich – mehr oder weniger – erledigt. Ich benutze auf meiner Website eine Image-Map, also:

      Mit einem solchen Link funktioniert die Smooth-Scroll Funktion nicht. Schade.

  18. Hallo Marco,
    der Syntaxfehler bezieht sich auf die
    &amp;&amp;
    die sich 2x in den Code eingeschlichen haben.
    Dort muss natürlich beide Male nur
    &&
    stehen.
    Danke für den Codeschnipsel Ellen!

    • Vielen Dank für den Hinweis! Dieser Fehler hat mich nen ganzen Tag gekostet … jetzt funktionierts wunderbar :)

  19. Danke für das Script. Leider kollidiert es mit Twitter-Bootstrap/jQuery wenn ich zum Beispiel einen modalen Layer (modal.js) verwenden will, da der mit #href aufgerufen wird.


    $(function(){
    $(‚a[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) {
        var targetOffset = target.offset().top;
        $(‚html,body‘).animate({scrollTop: targetOffset}, 400);
        return false;
      }
      }
    });
    });

  20. Hallo

    Danke für das nette Script. Ich arbeite mit Buttons und komme nicht weiter, wie ich da das Script anpassen muss um den gleichen Erfolg zu haben wie mit einem simplen Link

    Hat da wer eine Idee, wie man sowas abfangen kann?

  21. Hallo

    Danke für das nette Script. Ich arbeite mit Buttons und komme nicht weiter, wie ich da das Script anpassen muss um den gleichen Erfolg zu haben wie mit einem simplen Link

    Hat da wer eine Idee, wie man sowas abfangen kann?
    Danke & Gruss
    Adrian

  22. Hallo,

    toller Effekt, leider bekomme ich es auf meiner Seite nicht hin. ich habe eine Single Page und würde auch gerne diese Funktion haben wollen

    Ich füge

    und das

    in den Head Bereich:

    Und das:

    1
    $(function(){
    2
    $(‚a[href*=#]‘).click(function() {
    3
    if (location.pathname.replace(/^\//,“) == this.pathname.replace(/^\//,“)
    4
    &amp;&amp; location.hostname == this.hostname) {
    5
    var $target = $(this.hash);
    6
    $target = $target.length &amp;&amp; $target || $(‚[name=‘ + this.hash.slice(1) +‘]‘);
    7
    if ($target.length) {
    8
    var targetOffset = $target.offset().top;
    9
    $(‚html,body‘).animate({scrollTop: targetOffset}, 1000);
    10
    return false;
    11
    }
    12
    }
    13
    });
    14
    });

    (ohne Zahlen natürlich) verknüpfe ich im head Bereich.

    Muss ich jetzt noch irgendwo sagen welche Anker angesprochen werden sollen?

    ich blick’s nicht. Sorry

    Vielleicht kann mir jemand helfen.

  23. dyedgreen 9. Oktober 2013

    Schöner effekt :D, aber wie kann ich es einrichten, das er das „top“ nicht an die obere grenze der seite bringt, sondern um einen bestimmten betrag davon weg?

  24. huhu,

    du hast da formatierungsfehler im code,
    das kaufmanns-und wird als entities dargestellt: &amp;&amp;

  25. Hi,
    der Link für das „besonders schönes Beispiel“ funktioniert leider nicht mehr. ;)
    Besten Gruß,
    Jesko

  26. Hallo,

    super Script, einfach einzubauen und funktioniert!

    zumindest fast, der ERSTE KLICK funktioniert bei mir nie, da springt es immer, ab dann geht es, wie kann das kommen?

    Danke!

  27. Vielen Dank für den schönen Code!
    Es gibt kaum mal jemanden im Netz, der ihn so idiotensicher aufgeschrieben hat, dass auch ich ihn implementiert bekommen habe :-)
    Danke!!!

  28. Hallo und vielen Dank für den schönen code! Gibt es eine Möglichkeit, dass der code einen bestimmten Anker ignoriert? Ich würde es gerne nur bei ein paar Ankern und nicht bei allen benutzen! Danke im Voraus für die Hilfe :)

    LG
    Finn

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *