Scrollen via jQuery

closeDieser Beitrag wurde vor mehr als drei Monaten veröffentlicht. Bedenke bitte, dass die hier angebotene Information nicht mehr aktuell und gültig sein könnte. Informiere dich daher bitte auch an anderer Stelle über dieses Thema. Sollten sich neue Informationen ergeben haben, so kannst du mich auch gerne auf diese über einen Kommentar hinweisen. Vielen Dank!

Hier ein kurzes Beispiel, wie man via jQuery die Position eines Elements herausfindet und automatisch an diese Stelle scrollen kann. Wer sich noch nicht so gut mit jQuery- / CSS-Selektoren auskennt, sollte sich einmal folgenden Beitrag durchlesen. -> http://suckup.de/howto/jquery/crashkurs-jquery-selektoren/

 

.scrollTop() -> gibt die Scrollbar Position eines bestimmten Elements zurück 

.scroll() -> wird ausgeführt, wenn gescrollt wird (event handler)

.animate() -> erzeugt animations Effekte via numerischer CSS-Einstellungen

.offset() -> gibt die Koordinaten (x,y) eines Elements zurück 

.height() -> gibt die Höhe eines Elements zurück

 

Beispiel: jQuery_scroll.html

 

onClick=”$(‘#box’).show(); $(‘html,body’).stop(true,true); var target = $(‘#box’); var bottom = target.offset().top+target.height()-250; $(‘html,body’).animate({scrollTop: bottom}, 500); return false;”

 

-> bei “Klick” [onClick] 

    -> zeige das Element mit der ID “box” [#box] an

        -> halte alle Animationen an [stop(true,true)]

          -> die Höhe des Elements auf den x-Koordinate daraufrechnen [offset().top+target.height()]

            -> zu der neuen Koordinate des Elements scrollen [animate({scrollTop: bottom}, 500)]

 

  • http://www.transport-wendrich.de Sven

    Perfekt, genau wonach ich gesucht habe, da kann man dochmal einiges mit machen :D