15.02.2009
SmoothScroll für jQuery
zur Übersicht 5 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
// jQuery SmoothScroll | Version 10-04-30
$('a[href*=#]').click(function() {
// duration in ms
var duration=1000;
// easing values: swing | linear
var easing='swing';
// get / set parameters
var newHash=this.hash;
var target=$(this.hash).offset().top;
var oldLocation=window.location.href.replace(window.location.hash, '');
var newLocation=this;
// make sure it's the same location
if(oldLocation+newHash==newLocation)
{
// animate to target and set the hash to the window.location after the animation
$('html:not(:animated),body:not(:animated)').animate({ scrollTop: target }, duration, easing, function() {
// add new hash to the browser location
window.location.href=newLocation;
});
// cancel default click action
return false;
}
});
Viel Spaß damit!
–






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