Wer hat diesen schönen Effekt noch nicht gesehen – bei der seiteninternen Ankernavigation gleitet der Bildschirminhalt sanft herunter, anstatt direkt dorthin zu springen. Dafür gibt es ein bekanntes Plugin von Ariel Fisler: jQuery.localScroll. Dieses Plugin benötigt jedoch ein weiteres Plugin vom gleichen Entwickler: jQuery.scrollTo. Selbst als minified-Version wären zwei HTTP-Requests und 4 kb notwendig, um diese einfache Animation zu implementieren. Das liegt daran, dass Ariel Fisler’s Plugin sehr viel umfangreicher ist und noch mehr Möglichkeiten bietet. Ich habe diese in all meinen Projekten aber noch nie ausgeschöpft, so dass ich mir mein eigenes Plugin geschrieben habe, welches sich auf den Scrolleffekt beschränkt und (minified) äußert schlanke 624kb 624b 662 Bytes groß ist.
Download / Demo
Download: Version 1.1
jQuery.com Plugin Description & Help (english)
Anwendung
Die einfache Anwendung sieht so aus:
$(document).ready(function() {
$('a[href^="#"]').pageScroll();
});
Diese Zeile wendet pageScroll nun auf alle Links an, die mit einem “#” beginnen (und dementsprechend als seiteninterne Navigation dienen).
Dieses Plugin bietet einige Optionen, damit es sich eurem Vorhaben anpassen kann:
speed
(Integer, Standardwert: 1000)
Wie schnell soll die Scrollanimation sein? (Zeit in ms)
offset
(Integer, Standardwert: 0)
Der Zusatz in px, der zum oberen Bildschirmrand belassen werden soll
easing
(String, Standardwert: “”)
Wenn das Easing-Plugin (oder eine neuere Version von jQuery UI) ebenfalls eingebunden ist, kann hier ein anderes easing-Verfahren definiert werden
activeClass
(String, Standardwert: “current”)
Wird ein lokaler Link aktiviert, erhält er diese Klasse (Sinnvoll zum markieren aktiver Links)
anchorSrc
(String, Standardwert: “href”)
Normalerweise befindet sich das Ankerziel im href-Attribut des Elements. Wenn andere Elemente selektiert werden sollen, kann das Attribut, das Aufschluß über den Ziel-Anker gibt, hier definiert werden
event
(String, Standardwert: “click”)
Bei welchem Ereignis soll das Plugin reagieren? (Es können alle jQuery-eigenen Eventtypen gewählt werden)
writeHash
(Boolean, Standardwert: true)
Soll der Anker in der URL mit angegeben werden?
onScrollStart, onScrollFinish
(Closure / Callback, Standard: leere Funktion)
Hier können Callbacks angegeben werden, die jeweils vor oder nach dem Start der Animation getriggert werden. Als Parameter wird der aktivierte Link (bzw. das aktiverte Element) als jQuery-Objekt übergeben.
Eine Demoversion der Plugins könnt ihr euch hier ansehen. Die Datei als Download gibt es hier (Version 1.1, WinRar-Datei).
Hallo Autor,
das Script funktioniert im Chrome und Safari leider nicht.
Gruß
Du meinst wohl 624 Bytes :)
@Rainer
Vielen Dank, habe es nicht ausreichend getestet. Der Fehler ist mit der Version 1.1 behoben.
@Alex
Natürlich. Der Kaffee fehlte mir heute :)
Hallo Daniel,
jetzt klappt es einwandfrei :)
Gruß
hi! also ich hatte schon die klassiche scrollto variante versucht und jetzt diese hier. aber ich bekomm es einfach nicht zum laufen. jquery eingebunden, die pagescroll js, die easin js…dann den code eingepflegt. rein inhaltlich passt alles. nur das einzige was passiert: er springt zum zielort. das tut er aber auch ohne die ganze .js-datein. als würde er sie einfach ignorieren. hatte es in mehrern browsern versucht. irgendeine idee?
Vermutlich wurde der Speicherort der externen Dateien nicht korrent angegeben. Hast du einen Online-Link, damit man sich das mal ansehen kann? Ansonsten kannst du auch gerne in meinem “Stammforum” nachfragen – phpforum.de – dort wird dir bestimmt geholfen.
PS: Lade dir Firebug für den Firefox herunter, dann kannst du sehen, ob alle Dateien korrekt eingebunden wurden.
Klappt Horizontal und vertikal??
Endlich gefunden, nach dem Script hab ich schon länger gesucht. Bzw. nach einem ähnlichen aber das was ich gefunden hatte hat nie funktioniert.
Das hier dagegen läuft prima, super. Danke, vielen Dank!
Herzlichen Dank, echt nützlich, dein Script, und schön schlank! Frage: In welchen Browsern hast du das schon getestet? Und welche Lizenz hat das?
Übrigens: jquery.com ist jetzt leider schon länger offline. Ich wußte mir zwar zu helfen, aber vielleicht kannst du den Download anders anbieten? Oder evtl. auf Github auslagern?
Danke für das coole Script. Wenn ich das Event auf “click” ändere, blinkt die Seite bzw. Container davor auf. Hast du vielleicht eine Idee?
Lg
Danke für das coole Script. Wenn ich das Event auf ‘click’ ändere, blinkt die Seite bzw. Container davor auf. Hast du vielleicht eine Idee?
Lg
Kannst du mir ein Live-Beispiel zeigen?
@Michael – ich hatte das Problem auch habe habe es mit (writeHash: false,) gelöst… Wenn du also nicht unbedingt den #hashCode brauchst, dann wäre das wohl was für dich.
@Daniel:
was ich mir jetzt noch wünschen würde ist – wenn man die Seite manuell Scrollt und man zur gewünschten Sektion kommt, dass dann auch der Link aktiv wird. Momentan wird der Link ja nur Aktiv, wenn man direkt über die Navi klickt bzw. hovert. Ist denn das möglich mit dem manuellen Scroll?
@Daniel – hast du dafür vielleicht eine Idee, wie ich das mit dem manuellen Scroll und der aktiven Classe anstellen kann? Würde mich sehr freuen.