jQuery: move Fenster Ansichtsfenster zeigen frisch gewechselt Element

Question

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

$('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 
}); 

Die Toggle funktioniert gut, wenn auf den Link klicken. Das Problem, das ich habe, ist, dass div#addnote-area unter dem aktuellen Ansichtsfenster des Browsers bleibt, bleibt es dort, wenn es angezeigt wird. Ich möchte, dass der Cursor des Benutzers zum Textfeld geht und das gesamte Textfeld im Fenster angezeigt wird.

Click here to see an image http://i50.tinypic.com/5ousuv.png

Answer 1

Überprüfen Sie die scrollTo jQuery plugin aus. Sie können einfach 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); 

Answer 2

jQuery scrollTop funktioniert auch. Versuchen Sie, wie:

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

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

Answer 3

Ohne das scrollTo Plugin

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

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

hier ein Bonus ist, kann dies auch animiert werden.

Verwenden Sie einfach die animate() Funktion 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)