jQuery: déplacer fenêtre de fenêtre pour afficher l'élément fraîchement basculée

Question

J'ai un extrait de jQuery dans le document prêt qui permet de basculer d'un div contenant un 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 
}); 

La bascule fonctionne bien en cliquant sur le lien. Le problème que j'ai est que si div#addnote-area est en dessous de la fenêtre actuelle du navigateur, il reste là quand il est affiché. Je voudrais que le curseur de l'utilisateur passe à la zone de texte et que l'ensemble de la zone de texte soit visible dans la fenêtre.

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

Answer 1

Vérifiez la scrollTo jQuery plugin. Vous pouvez tout simplement faire quelque chose comme ceci:

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

Ou, si vous voulez animer, fournir le nombre de millisecondes pour le défilement pour durer:

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

Answer 2

jQuery de scrollTop fonctionne également. Essayez de régler comme:

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

Vous pouvez obtenir la hauteur/largeur assez facilement en utilisant $(...).offset().

Answer 3

Sans le plugin scrollTo

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

EDIT: Eh bien, je reçois que beaucoup de points de cette vieille réponse :)

Voici un bonus, cela peut aussi être animé.

Il suffit d'utiliser la fonction animate() et cibler la balise body:

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

Essayez sur Stackoverflow! Ouvrez la console d'inspecteur et exécuter

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