Frage

Ich habe einen Schnipsel von jQuery in doc bereit, die ein div eine textarea enthält umgeschaltet wird:

$('div#addnote-area').hide(); // hide the div
$('a#addnote-link').click(function() { // click event listener on link
     $('div#addnote-area').toggle(); // toggle the hidden div 
});

Das Toggle funktioniert gut, wenn auf den Link klicken. Das Problem, das ich habe, ist, dass, wenn div#addnote-area unterhalb des Browsers aktuellen Ansichtsfenster ist, es bleibt, wenn es angezeigt wird. Ich würde die Cursor des Benutzers gerne das Textfeld zu gehen und für das gesamte Textfeld im Fenster sichtbar sein.

War es hilfreich?

Lösung

Schauen Sie sich die scrollTo jQuery-Plugin . Sie können einfach so etwas tun:

$.scrollTo('div#addnote-area');

Oder, wenn Sie es animieren möchten, geben Sie die Anzahl der Millisekunden für das Scrollen zum letzten:

$.scrollTo('div#addnote-area', 500);

Andere Tipps

Ohne die scrollTo Plugin

$(window).scrollTop($('div#addnote-area').offset().top)

EDIT: Nun, ich sicher, dass viele Punkte aus dieser alten Antwort bekommen:)

Hier ist ein Bonus, kann dies auch animiert werden.

Sie einfach die animate() Funktion verwenden und den Body-Tag Ziel:

$('body').animate({scrollTop:$('div#addnote-area').offset().top},500)

Versuchen Sie es auf Stackoverflow! Öffnen Sie den Inspektor Konsole und führen

$('body').animate({scrollTop:$('#footer').offset().top},500)

jQuery scrollTop funktioniert auch. Versuchen Sie, wie:

 $('#idOfElement').css('scrollTop', 10)

Sie können Hoehe / Breite ziemlich leicht mit $(...).offset().

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top