15.02.2009
SmoothScroll für jQuery
zur Übersicht 30 Kommentare von Bogdan
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!






Kommentar schreiben
30 Kommentare
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.