Softscroll mit jQuery

27. Oktober 2006 Bisher 17 Kommentare

Mit jQuery hat man eine JavaScript-Bibliothek an der Hand, mit der man binnen weniger Minuten effektvolle Dinge in seinem DOM anstellen kann. Mit dem Plugin “Interface” gibt es dazu noch eine Effektbibliothek. Unter den Effekten befindet sich auch “ScrollTo”, welches das weiche, nicht ruckartige scrollen zu einem internen Link ermöglicht. Ich wollte aber nicht aber Links einzeln angeben, zu denen weich gescrollt wird, sondern mit einen Befehl alle. Hier ist die Anweisung…

Mit der folgenden Anweisung konnte man mittels Interface zu einem Element auf der gleichen Seiten weich scrollen:

$(’#lastP’).ScrollTo(800);

Das eingesetzt bei einem Klick auf einem Link mit einer bestimmten ID, scrollte weich zum Element mit der ID lastP.

Inspiriert von Oliver wollte ich aber auch für jQuery eine Funktion haben, die alle Seiteninternen Verweise mit einem Softscroll verpasst, und zwar ohne, dass ich wie bei Oliver jedem Link die CSS-Klasse softscroll zuweisen muss. Weil mich google nicht weit gebracht hat, hab ich einmal selbst was zusammengeschrieben, was bei einer validen Seite wunderbar funktioniert.

$(document).ready(maininit);
function maininit() {
    $('a[@href^="#"]').click(function() {
        var parts        = this.href.split('#');
        var scrolltarget = '#' + parts\[1\];
        $(scrolltarget).ScrollTo(800);
        return false;
    });
};

Denkt euch bitte bei parts die Schrägstriche vor den eckigen Klammern weg.

Das zustätzlich mit jQuery und Interface in den HTML-Kopf der Webseite, scroll der Browser sehr weich zu dem angegebenen Link auf der gleichen Seite. Wie gesagt, ohne Extra-Markup, das ganze ziemlich Web 2.0 und vor allem Dingen mit “unobtrusive JavaScript”.

UPDATE: Dank Markus flackert nun nichts mehr. Besonderer Dank geht an Stefan, der mein Script in sein Plugin aufgenommen hat (Tanks Stefan!).

Dieser Artikel wurde am Freitag, 27. Oktober 2006 um 09:10 Uhr von macx geschrieben und unter Intern, Webdesign abgelegt. Du kannst die Antworten zu diesem Beitrag via RSS 2.0-Feed beobachten.

Hinterlasse hier eine Nachricht, oder sende einen Trackback von deiner Webseite aus.
Trackback-URL: http://macx.de/journal/softscroll-mit-jquery/trackback/

Kommentare

Einen eigenen Kommentar schreiben

  1. 1 Silvio schrieb am 27. Oktober 2006 (10:10 Uhr)

    Hast du auch ein Beispiel? Und funktioniert der Backbutton noch? Denn bei dem Beispiel von Oliver nämlich nicht? Hier, bei Manuela aber schon…

  2. 2 macx schrieb am 27. Oktober 2006 (10:10 Uhr)

    Manuela spricht die Links direkt per ID an, nicht alle automatisiert.
    Eine Beispielseite findest du hier

  3. 3 Markus Stange schrieb am 27. Oktober 2006 (17:10 Uhr)

    Oh, das sieht gut aus.

    In meinem Firefox flackert das direkt nach dem Klick noch kurz, da Firefox selbst schon zum Ziel springt, bevor das JS-Scrolling zum Einsatz kommt. Mit einem return false; nach dem ScrollTo(800); passiert es aber nicht mehr.

  4. 4 Stefan schrieb am 27. Oktober 2006 (19:10 Uhr)

    Hi,

    I like this idea so much. I will make an addition to plugin with this.

  5. 5 macx schrieb am 27. Oktober 2006 (19:10 Uhr)

    @Markus
    Ja, du hast Recht, mit einem return false falckert er nicht mehr. Danke.

    @Stefan
    I love the Internet. Thank your great plugin. Please add Markus-idea to add an return false. Plese let me know about the change.

  6. 6 Stefan schrieb am 27. Oktober 2006 (19:10 Uhr)

    I already added the new functionality plus a new option: scrolling only on vertical or horizontal axis.

    http://jquery.com/dev/svn/trunk/plugins/interface/ifxscrollto.js

    And returns false on click.

  7. 7 macx schrieb am 27. Oktober 2006 (19:10 Uhr)

    Fast. Thank you! Specielly for “inspired by macx.de”.
    I added an update to this german description above.

  8. 8 Oliver schrieb am 04. November 2006 (23:11 Uhr)

    Hallo. Ist es mit jquery auch möglich den auf der Beispielseite gezeigten Effekt auch in horizontaler Richtung (bei einem DIV, das z.B. 3000px breit ist) zu realisieren? Gibt es auch dafür ein Beispiel? Wenn ich jquery entsprechend einsetze, bricht das Scrolling nach 10% der Strecke ab (scrollt nur ein paar Pixel nach rechts)... Ist das ein Bug, oder ScrollTo tatsächlich nur für vertikal gedacht?

  9. 9 Oliver schrieb am 06. November 2006 (13:11 Uhr)

    Lesen hilft… Sorry, habe Eintrag Nr. 6 überlesen…

    Nachdem ich ifxscrollto.js heruntergeladen und eingebaut habe, klappt leider gar nix mehr? Ist zufällig ein kleines Beispiel für horizontales Scrolling verfügbar?

  10. 10 macx schrieb am 06. November 2006 (13:11 Uhr)

    Schau noch einmal hier. Ich habe eine Box rechts positioniert und es funktioniert. Klick mal auf “zur Sprungmarke 2”

  11. 11 Oliver schrieb am 06. November 2006 (17:11 Uhr)

    Hallo macx, danke für das Beispiel. Habe meinen Fehler gefunden (der übrigens auch dein Beispiel zerlegt): Es funktioniert nicht mit überbreiten DIV… Setzt man in deinem DIV test2 den margin-left auf z.B. 2500, erreicht man die Sprungmarke 2 schon nicht mehr. Zumindest meine Konfiguration (XP, FF1.5.0.7) bricht das Scrolling ab…

    Schade, ich dachte an eine Website im Stile von manuela-hoffmann.info, allerdings in horizontaler Richtung…

  12. 12 Johannes schrieb am 06. Mai 2007 (01:05 Uhr)

    Hallo macx, hallo Oliver,

    für sanftes, horizontales scrollen über 3000px hinaus würde ich mich auch sehr interessieren – Wieso geht es denn gerade nur bis 2000px (woher kommt diese Zahl?) und gibt es irgendeine Lösung, die dem Abhilfe verschaffen könnte?

  13. 13 Jan schrieb am 20. Juni 2007 (11:06 Uhr)

    Toller Tipp! Danke dafür :-D

  14. 14 Pepe schrieb am 10. Januar 2008 (14:01 Uhr)

    Leider klappt das ganze nur pro Link 1 mal.
    Das heißt ein erneutes Scrollen wird nicht ausgeführt, wenn man ein 2. mal auf denselben Link klickt.
    Gibts da vllt ne Lösung?

  15. 15 Johannes schrieb am 17. Februar 2008 (19:02 Uhr)

    Das Problem was Pepe#14 angesprochen hat, ist mir auch gerade aufgetreten. Meine Beobachtung: Wenn man das “return false” rauslässt funktionieren die Links auch mehrfach, allerdings ab dem zweiten mal komplett ohne Animation. (Safari 2 und Firefox, Mac OS 10.4.11)
    Ich schließe daraus, dass aus irgend einem Grund das jQuery nur einmal funktioniert, und ab dort die “normalen” Anchor-Sprünge ausgeführt werden. Jemand ne Ahnung warum? Wäre cool wenn das auch mehrfach funktionieren würde…

  16. 16 Steve schrieb am 21. August 2009 (21:08 Uhr)

    Hi.

    Ich würde ganz gerne bei Klick auf ein div mit id den body UM 500 pixel nach rechts scrollen. Also NICHT ZU den absoluten Koordinaten oder zu einem bestimmten Anchor, sondern UM 500 pixel nach rechts – jedesmal, wenn man das div anklickt.

    Das muss doch irgendwie gehen.

    Habt ihr eine Idee?

    Danke und Gruß,
    Steve

  17. 17 gmadewiesn schrieb am 19. Januar 2010 (22:01 Uhr)

    hallo, bin neu hier und interessiert wie ich diesen softscroller in meine seite einbinden kann. da ich aber nur mit tapbles arbeite nun die frage, funktioniert der scroller mit tables auch? oder muss ich alles auf div umbauen?
    besten gruss

Antwort schreiben

Kommentare neuer Teilnehmer werden auf Grund von hohem SPAM-Aufkommen zunächst von mir freigeschaltet, bis sie online erscheinen. Textile kann benutzt werden.

(wird nicht veröffentlicht)