Kommentare 38

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!

38 Kommentare

  1. 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

  2. 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

  3. 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

  4. Oliver

    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

  5. 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

  6. 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!

  7. Ivan

    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??

  8. 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… :-(

  9. daniela

    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

  10. Oli

    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

  11. Marco

    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…

    • Marco

      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.

  12. Rob Wolo

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

  13. Adrian

    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?

  14. Adrian

    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

  15. 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.

  16. Andreas

    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!

Schreibe eine Antwort