jQuery: Mueve la ventana de visualización para mostrar elemento recién toggled

Question

Tengo un fragmento de jQuery en el doc preparada, que alterna un div que contiene una textarea:

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

El conmutador funciona bien cuando se hace clic en el enlace. El problema que tengo es que si div#addnote-area está debajo de la ventana gráfica actual del navegador, permanece allí cuando se muestra. Me gustaría que el cursor del usuario vaya al área de texto y que todo el área de texto se pueda ver en la ventana.

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

Answer 1

Mira la scrollTo jQuery plugin. Simplemente puede hacer algo como esto:

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

O, si se quiere animar, dar el # de milisegundos a que el desplazamiento para durar:

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

Answer 2

de scrollTop jQuery también funciona. Pruebe a establecer como:

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

Puede obtener altura/anchura bastante facilidad utilizando $(...).offset().

Answer 3

Sin el plugin scrollTo

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

EDIT: Bueno Estoy seguro de tener una gran cantidad de puntos de esta vieja respuesta :)

Aquí hay un bono, esto también puede ser animada.

sólo tiene que utilizar la función animate() y el objetivo del cuerpo de la etiqueta:

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

probarlo en Stackoverflow! Abra la consola inspector y ejecutar

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