<a name="top" id="top"></a>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

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

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

15 Kommentare

1. 

   Dave

   Ja dieses Smooth Scrollen gefällt mir. Habe da auch auf meiner Site etwas ein­ge­baut vor einiger Zeit. Einfach ein »Scroll to Top« wenn man nach unten scrollt. :) !

   • 12/10/2009 @ 18:13
   • · Antworten
2. 

   Ellen

   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

   • 14/10/2009 @ 03:26
   • · Antworten
3. 

   Barbara

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

   • 14/10/2009 @ 11:52
   • · Antworten
4. 

   Ellen

   Hihi ;-) Vielen lieben Dank für deinen lieben Kommentar, Barbara! Die SmoothScrolls sind wirk­lich sehr leicht in eine Webseite ein­zu­bauen, aber der Effekt ist super angenehm!

   • 14/10/2009 @ 15:17
   • · Antworten
5. 

   Jannis Gerlinger

   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

   • 26/10/2009 @ 11:38
   • · Antworten
6. 

   Ellen

   Hallo Jannis,

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

   Gruß Ellen

   • 04/11/2009 @ 06:06
   • · Antworten
7. 

   Giulia

   Habe gerade ver­sucht es auf meiner Seite ein­zu­binden, aber es funk­tio­niert immer noch nicht. Nur so als kleiner Hinweis ;)

   _______________________________________________

   $(func­tion(){

   $(›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 target­Offset = $target.offset().top;

   $(›html,body‹).animate({scrollTop: target­Offset}, 1000);

   return false;

   }

   }

   });

   });

   ________________________________________________

   Damit hat es dann geklappt.

   Grüße,Giulia

   • 11/08/2010 @ 23:05
   • · Antworten
   • 

     Ellen

     Hallo Giulia,

     vielen herz­li­chen 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

     • 13/08/2010 @ 08:10
     • · Antworten
8. 

   Tilman

   Was muss ich denn machen, um mit dem Script in einem Div zu scrollen?

   • 31/10/2010 @ 14:30
   • · Antworten
9. 

   Oliver

   Hallo,

   bin jetzt schon länger begeis­terter Leser Eurer Seite und mich würde auch bren­nend inter­es­sieren, 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

   • 20/04/2011 @ 18:12
   • · Antworten
10. 

    Ralf

    Danke für die Anleitung hier des ScrollTops , bin in jQuery teil­weise 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 ver­ein­facht und gleich noch gekürzt.

    $(func­tion(){
    $(›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 unbe­dingt 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

    • 29/06/2011 @ 21:53
    • · Antworten
    • 

      Ralf

      Da ist mir glatt ein Fehler unter­laufen , statt evt.stopPropagation() muss es natür­lich evt.preventDefault() heißen damit die Standartausführung des Links abge­bro­chen wird.

      • 29/06/2011 @ 21:58
      • · Antworten
11. 

    Klaus

    Hallo Ellen,

    vielen Dank für diesen tollen Beitrag. Habe ich direkt bei mir ein­ge­baut und hat auf Anhieb funktioniert.

    Herzliche Grüße
    Klaus

    • 25/07/2011 @ 21:28
    • · Antworten
12. 

    mr92

    Hallo,

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

    Allerdings funk­tio­niert es bei mir leider nicht, mir wird gesagt, dass in dieser Zeile ein Syntaxfehler liegt?

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

    würde mich über Infos freuen!

    • 25/09/2011 @ 00:47
    • · Antworten
13. 

    Gregor Kempny

    Hallo mr92,

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

    • 22/12/2011 @ 01:03
    • · Antworten

Top