SUCKUP.de

Scrollen via jQuery

This blog post has been published on 2012-05-22 and may be out of date.

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