Scrollen via jQuery

closeThis post was published more than three months ago. Please note that the information offered here may no longer be current and valid. Therefore, please inform yourself about this topic elsewhere. If there is any new information, you can also send me a comment. Thank you so much!

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

 

Published by

voku

Lars Moelleken | Ich bin root, ich darf das!