English Version medianotions.de RSS-Feed abonnieren

15.02.2009

SmoothScroll für jQuery

Themen: JavaScript, jQuery | zuletzt bearbeitet: 18.04.2013


Vor kurzem musste ich feststellen, dass jQuery im Gegensatz zu MooTools keine Klasse SmoothScroll enthält um innerhalb einer Seite „smooth“ von einem Anker zum nächsten zu gleiten. Auch bei den Plugins auf jquery.com wurde ich nicht fündig. Dank Google habe ich doch noch einige Seiten gefunden die sich mit dem Thema befassen und habe aus unterschiedlichen Quellen mein eigenes jQuery SmoothScroll-Skript zusammengestellt:

jQuery SmoothScroll

<script type="text/javascript">

   $(document).ready(function()
   {         
      //
      // jQuery SmoothScroll | Version 18-04-2013
      //

      $('a[href*=#]').click(function() {

         // skip SmoothScroll on links inside sliders or scroll boxes also using anchors or if there is a javascript call
         if($(this).parent().hasClass('scrollable_navigation') || $(this).attr('href').indexOf('javascript')>-1) return;

         // duration in ms
         var duration=1000;

         // easing values: swing | linear
         var easing='swing';

         // get / set parameters
         var newHash=this.hash;
         var oldLocation=window.location.href.replace(window.location.hash, '');
         var newLocation=this;

         // make sure it's the same location      
         if(oldLocation+newHash==newLocation)
         {
            // get target
            var target=$(this.hash+', a[name='+this.hash.slice(1)+']').offset().top;

            // adjust target for anchors near the bottom of the page
            if(target > $(document).height()-$(window).height()) target=$(document).height()-$(window).height();         

            // animate to target and set the hash to the window.location after the animation
            $('html, body').animate({ scrollTop: target }, duration, easing, function() {

               // add new hash to the browser location
               window.location.href=newLocation;
            });

            // cancel default click action
            return false;
         }
      });
   });
   
</script>

Viel Spaß damit!

Downloads


Bookmark setzen oder Seite empfehlen

Kommentar schreiben

Die Kommentarfunktion ist nicht mehr aktiv

32 Kommentare

Bogdan zur Website

21.06.2013 17:29:31

Hallo Yvonne,

ich habe das Skript fast immer nur für einfache Scroll-Top-Effekte verwendet, mit vielen Ankern habe ich es nie getestet. Du kannst ansonsten auch dieses Skript probieren:

http://demos.flesler.com/jquery/scrollTo/

Viel Erfolg!

Bogdan

Yvonne zur Website

21.06.2013 14:13:47

Hallo

super Script - ich habe nur eine kleine Frage bzw. ein Problem:

Ich habe in meiner HTML Datei mehrere verlinkte Anker auf die gesamte
Höhe verteilt.
Wenn ich zu einem Anker, der sich weiter unten auf der Seite befindet
smooth scrollen will fährt er zuerst nach oben und dann springt er zu
dem eigentlichen Anker weiter unten.

Was mache ich falsch bzw. welche Werte muss ich ändern?

Liebe Grüße
Yvonne

Petich zur Website

26.02.2013 08:31:59

Servus an alle!

Probiere mal bei set selector statt

if($.browser.safari) var animationSelector=’body:not(:animated)’;
else var animationSelector=’html:not(:animated)’;

nur
var animationSelector=’html:not(:animated)’;

zu nutzen.

Natürlich in der .js als auch in der Datei in der du das script einbindest!

LG Petich

Bogdan zur Website

15.02.2013 19:45:28

Hallo Daniel,

das Skript funktioniert definitiv, ich setze es auf fast allen meinen Seiten ein. Hat vielleicht etwas bei der Integration nicht funktoniert, falscher Pfad oder ähnliches?

Viel Erfolg
Bogdan

daniel

15.02.2013 15:09:20

bei mir funktioniert es nicht. hab die js runtergeladen, eingebunden. aber es tut sich nicht. ich hatte vorher ein anderes smoothscroll script drin, was funktionierte aber nicht schön war :(

Markus

29.01.2013 14:17:20

Genial, genau das habe ich gesucht!
Vielen Dank, Gruß Markus

Bogdan zur Website

20.12.2012 12:29:05

Einfach das SmoothScroll.js runter laden und mit

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

auf deiner Seite einbinden und eventuell den Pfad anpassen.

Viel Spaß damit!

Webdesign Soest zur Website

19.12.2012 19:10:45

Eine kleine Anleitung wäre nicht schlecht. Oder habe ich die Übersehen?

Bogdan zur Website

28.11.2012 09:18:42

Hallo weschl,

meine Kontaktdaten findest du unter medianotions.de/kontakt.html. Sende mir doch Link und Info per Mail, dann schaue ich mal was ich tun kann.

Schöne Grüße

Bogdan

weschl

27.11.2012 22:27:34

hallo bogdan, vielen dank für deine schnelle antwort.
leider hat es nicht funktioniert. warscheinlich liegt das an meinen kaum vorhandenen javascript kenntnissen oder an der bootstrap data-toggle geschichte! vielleicht könntest du nen blick darauf werfen? *ganzliebschau :D

vielen dank nochmals

grüsse weschl

Bogdan zur Website

26.11.2012 18:30:23

Hallo weschl,

du kannst einfach die if-Abfrage in Zeile 9 // skip SmoothScroll … anpassen und dort den Selektor deiner Navigationsleiste eintragen. Das war’s schon :-)

Schöne Grüße

Bogdan

weschl

26.11.2012 18:07:36

hi bogdan,

thank you for this great working snippet.
have a problem on my one page site im working at.
need to exclude some anchors beeing part of another jquery
(its a tabbed navbar on my aboutme section)links are not working anymore since i included yours. how can i exclude #skills, #exper…and so on in your js?

Isabelle

23.04.2012 11:03:35

Vielen, vielen Dank :)
Genau das, was ich brauchte -> .js Datei ablegen, aufrufen und es funktioniert -> perfekt.
Isabelle

Bogdan zur Website

12.03.2012 09:21:18

Hallo Stefan,

ich kenne mich mit Typo3 überhaupt nicht aus, aber wenn du das Skript einfach so in den Kopfbereich eingesetzt hast, könnten eventuell die Script-Tags fehlen. Was mich auf die Idee bringt diese hier im Quelltext zu ergänzen :-)

Noch ein Tipp: binde JavaScript auf deinen Seiten besser ganz unten im Quelltext ein, siehe:

http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/

Viel Erfolg

Bogdan

Stefan zur Website

09.03.2012 17:55:40

Hallo Bogdan,

ich habe versucht, Dein Skript in Typo3 einzusetzen. MIttels
page.includeJS.file1 = fileadmin/js/smoothscroll.js habe ich das Script in den Headbereich eingebunden. Auf einer Seite mit verschiedenen Ankern (Sitemap-Modul mit Anzeige von Inhaltsabschnitten) wird jedoch nicht gescrollt.

Habe auch den Tipp von Balu $ gegen jQuery tauscchen befolgt, weil ich die t3jquery mit noconflict laufen habe. Aber es funktioniert nicht….

Hast Du eine Idee?

Gruß
Stefan
Stefan

Balu zur Website

16.09.2011 17:00:14

Genau soetwas habe ich gerade gesucht, vielen Dank!

Ich würde jedoch die $ mit jQuery austauschen, da mitlerweile die meisten Seiten auf jQuery.noconflict setzen! Ich habe dies für mich getan und alles funktioniert wie gewünscht.

Bogdan zur Website

14.07.2011 07:24:20

Hallo Nils,

danke für dein Feedback! Chrome sollte kein Problem sein, ich habe gerade noch einmal Chrome 12 getestet und das Smooth Scroll Script scrollt einwandfrei. Du kannst es auch auf dieser Seite ausprobieren wenn du auf den Button „zum Seitenanfang“ klickst.

Du kannst mir gerne den Link zur Seite senden auf der das Problem auftritt, dann werfe ich einen Blick drauf.

Schöne Grüße
Bogdan

Nils zur Website

12.07.2011 22:33:21

Hello,

Sehr feines script.

Sollte es normalerweise auf Chrome funktionieren?
Tu es bei mir nähmlich leider nicht.

Auf Mozilla aber einwandfrei.

Beste Grüße
Nils

Bogdan zur Website

07.04.2011 10:26:17

Hallo Chris, das Skript ist frei verwendbar :-)

Chris

07.04.2011 10:23:04

Hey,

danke für das Script. In wieweit darf man es denn verwenden? Hast keine Lizenz angegeben - da frag ich lieber nach, bevor ich es auf ner öffentlichen Seite einbaue.

VG
Chris

Chris zur Website

10.03.2011 08:01:37

Funktioniert super, danke für deine Mühe!

Bogdan zur Website

10.01.2011 17:20:05

Hallo Werner,

danke für den Hinweis. Ich belasse es erst mal noch dabei, dann ist das Skript auch noch mit jQuery 1.3.x kompatibel, behalte es aber für das nächste Update im Hinterkopf.

Schöne Grüße

Bogdan

Werner zur Website

10.01.2011 08:17:30

Hallo Bogdan,

Kompliment, sehr elegante Lösung.

Kleiner Tip noch:
Wie ich beim Googeln erfahren habe ist der Selektor
$.browser.safari ab jQuery 1.4 als veraltet (deprecated) gekennzeichnet.
Gewünscht ist ab sofort der Selektor $.browser.webkit

Ansonsten ein absolut perfektes SmoothScroll, besser geht nicht!

Grüße Werner

Bogdan zur Website

07.01.2011 17:35:28

Hallo Werner,

danke für deinen Beitrag, ich habe das Skript nun mit einer Abfrage entsprechend aktualisiert.

Der Grund warum beide Selektoren (‘body:not(:animated)’ und ‘html:not(:animated)’) enthalten waren, ist Safari der als einziger Browser an dieser Stelle ‘body:not(:animated)’ verlangt.

Nun funktioniert SmoothScroll für jQuery auch mit Opera!

Schöne Grüße

Bogdan

Werner zur Website

13.11.2010 13:40:53

Hallo Bogdan,

ich glaube, ich habe den Opera Bug gefunden:


$(‘a[href^=#]’).click(function() {
var duration=1000;
var easing=’swing’; // easing values: swing | linear
var newHash=this.hash;
var target=$(this.hash).offset().top;
var oldLocation=window.location.href.replace(window.location.hash, ”);
var newLocation=this;
if(oldLocation+newHash==newLocation) {
if ($.browser.opera) {
$(‘html:not(:animated)’).animate({
scrollTop: target }, duration, easing, function() {
window.location.href=newLocation;
});
}else {
$(‘html:not(:animated),body:not(:animated)’).animate({
scrollTop: target }, duration, easing, function() {
window.location.href=newLocation;
});
}
return false;
}
});


Habe es so gelöst. Opera verschluckt sich wenn er den html und den body-Selektor gleichzeitig bekommt.

Vielleicht bekommst Du es ja noch eleganter hin.

Grüße

Werner

Bogdan zur Website

12.11.2010 17:44:43

Hallo Werner,

danke für den Hinweis zu den Problemen mit Opera. Leider habe ich dafür spontan auch keine Lösung. Eventuell komme ich dazu mir das mal näher anzusehen, kann es dir aber nicht versprechen.

Eine schnelle Lösung wäre - falls du etwas JavaScript kannst - SmoothScroll bei Opera nicht zu aktivieren; Opera-Nutzer hätten dann einfach das normale Verhalten bei Ankern.

Beste Grüße

Bogdan

Werner zur Website

12.11.2010 10:54:28

Kompliment,

Dein SmoothScroll funktioniert prima. Selbst die CSS3 - Pseudo-Klasse ":target"
kann ich damit ansprechen!!

Das schafft nicht mal Ariel Flesler mit seinem überladenem Plugin "localScroll"

Nur Opera 10.63 zeigt hier ein merkwürdiges Verhalten:

Er springt erst zum Seitenanfang und fängt dann erst an zu Scrollen.

Wenn Dir dafür eine Lösung einfällt, gerne auch per Mail:

mail@gold-gold-gold.de

Freundliche Grüße aus dem Harz

Werner

Boris zur Website

11.05.2010 22:52:10

Danke für das Schnippselchen, genau so etwas "einfaches" habe ich gesucht (scrollTo kann viel zu viel). :)

Bogdan zur Website

11.06.2009 12:47:10

Hallo Roman,

> Allerdings scrollt es bei mir sehr "hart"
du hast recht, hier könnte man etwas mehr Komfort bei der Anpassung einbauen. Ich habe das Skript um die Parameter _duration_ und _easing_ erweitert. Damit kann man nun dIe Zeitspanne von Anfang bis Ende des Scroll-Vorgangs und die Art der Bewegung anpassen.

> und auch nur von oben nach unten und nicht von links nach rechts
Ja, ich habe das Skript absichtlich nur für vertikales Scrollen ausgelegt wie es bei Sprüngen von Anker zu Anker üblicher Weise benötigt wird. Horizontales Scrollen wäre zwar einfach möglich, verursacht aber einige Probleme in der praktischen Anwendung. Wenn du so etwas in der Art wie die Sliding Pages (http://themeforest.medianotions.de/slidingpages-basic) umsetzen willst, würde ich zum jQuery Plugin scrollTo raten (http://demos.flesler.com/jquery/scrollTo/)

Viel Erfolg!

Roman

10.06.2009 23:54:23

Hallo,
sehr einfache und leichte Möglichkeit ein Scrollen einzubinden :) Dankeschön.
Allerdings scrollt es bei mir sehr "hart" und auch nur von oben nach unten und nicht von links nach rechts wie bei Mootools. Gäbe es eine einfache Möglichkeit dies zu implementieren ?

Bogdan zur Website

04.06.2009 09:07:34

Hallo Till,

ja ScrollTo kenne ich, ist mehr dafür gedacht zu Bereichen einer Seite mit Koordinaten hinzuscrollen und deutlich komplexer (siehe die Demos unter http://demos.flesler.com/jquery/scrollTo/).

SmoothScroll für jQuery bindest du einfach auf einer Seite ein und Anker-Sprünge wie
<a href"#top">nach oben</a> werden ohne weiteres zutun smooth umgesetzt. Eine Demo hast du direkt hier im Blog mit den Buttons [zum Seitenanfang] oder [5 Kommentare] (obwohl hier noch Mootools zum Einsatz kommt, aber das Funktionsprinzip ist das Gleiche).

Till

03.06.2009 17:59:31

Und was ist mit diesem Plugin:
http://plugins.jquery.com/project/ScrollTo

Aber vielleicht habe ich das noch nicht ganz verstanden. Ein Demo Deines Codes wäre gut. Meine Vorstellungskraft reicht dafür leider nicht aus.