NoFollow Free!
SHIFT Weblog

Dieses Blog ist ein Online-Magazin für erfahrene Website-Entwickler und Webdesigner, die PHP und Webdesign lieben.

JavaScript & jQuery

Mein jQuery-Plugin: PageScroll (ScrollTo-Alternative)

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

Demo

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).

 

Kommentare

Auf dieses Thema gibt es 17 Reaktionen

  1. Hallo Autor,

    das Script funktioniert im Chrome und Safari leider nicht.

    Gruß

  2. @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 :)

  3. Hallo Daniel,

    jetzt klappt es einwandfrei :)

    Gruß

  4. stefan

    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.

  5. Hannes

    Klappt Horizontal und vertikal??

  6. 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!

  7. SiGa

    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?

  8. Michael

    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

  9. Michael

    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

  10. @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?

  11. @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.

  12. mischaef

    Hallo Daniel,

    erst mal klasse Script.

    Ich habe aber letztenendes das gleiche Problem wie Michael. Wenn ich das Script so umstelle, dass ein Scrollen nur nach dem Mausklick erfolgt (“onclick”???) dann blinkt die Seite komplett nach oben gescrollt kurz auf und scrollt dann. Das passiert bei mir aber nur im IE, FireFox funzt wunderbar.

    Ich wollte zwar die Lösung mit dem HASH-Wert von Alex ausprobieren, aber das funzt bei mir auch nicht so dolle…weiß aber nicht ob ich es überhaupt richtig eingefügt habe…

    Hättest Du da einen Tipp für mich? Besten dank

  13. Patrick

    Hallo Daniel,

    klasse Script! Funktioniert wunderbar.

    Gibt es auch die Möglichkeit, dass die Links beim “händischen” scrollen aktiv werden?
    Also, wenn ich von “home” über “about us” nach “contact us” runterscrolle, mit der Maus, soll der Menüpunkt “about us” auch kurzzeitig aktiv werden, so lange, bis ich seinen Bereich verlasse!?

    Grüße
    Patrick

  14. “@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.”

    Das wäre auch mein Wunsch =)

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

 

Weitere Artikel der Kategorie JavaScript & jQuery

CSS, JavaScript & jQuery, Quickies

CSS-Schnittstelle für deaktiviertes JavaScript

Moderne Webseiten sind oft vollgestopft mit JavaScripts, um die Benutzerfreundlichkeit zu verbessern. Natürlich sollte eine Seite dann aber so gestaltet sein, dass sie auch ohne JavaScript funktioniert. Dabei müssen aber oft Anpassungen im Stylesheet vorgenommen werden. Das wiederum bedeutet, dass CSS-Anpassungen gemacht werden müssen, je nachdem, ob JavaScript beim Client aktiviert ist oder nicht. Das

Weiterlesen ›

Allgemein, JavaScript & jQuery

Sechs unbekannte, aber geniale jQuery-Plugins

Plugins für jQuery gibt es wie Sand am Meer – manche sind sehr bekannt, manche nicht. Das ist schade, wo doch viele gute Plugins in der Versenkung verschwinden. Ich stelle euch hier acht Plugins vor, die mehr Beachtung verdienen – denn diese tragen sehr zur “User Experience” bei. Colorbox Colorbox ist ein Lightbox-Klon, der meiner

Weiterlesen ›