Comment faire défiler un élément en jQuery ?

Question

J'ai fait le code suivant en JavaScript pour mettre le focus sur un élément particulier (branch1 est un élément),

document.location.href="#branch1";

Mais comme j'utilise aussi jQuery dans mon application web, je veux faire le code ci-dessus en jQuery. J'ai essayé mais je ne sais pas pourquoi cela ne fonctionne pas,

$("#branch1").focus();

Le code jquery (focus()) ci-dessus ne fonctionne pas pour le div, alors que si j'essaie le même code avec le textbox, alors il fonctionne,

Dites-moi, s'il vous plaît, comment puis-je mettre le focus sur un élément div en utilisant jQuery ?

Merci !

Answer 1

Pour mon problème, ce code a fonctionné, je devais naviguer vers une balise d'ancrage au chargement de la page :

$(window).scrollTop($('a#captchaAnchor').position().top);

Vous pouvez d'ailleurs l'utiliser sur n'importe quel élément, et pas seulement sur une balise d'ancrage.

Answer 2

Comme @user293153, je viens seulement de découvrir cette question et il semble que la réponse ne soit pas correcte.

Sa réponse était la meilleure. Mais vous pouvez également animer l'élément.

$('html, body').animate({ scrollTop: $("#some_element").offset().top }, 500);

Answer 3

Vous pouvez étendre les fonctionnalités de jQuery comme ceci :

jQuery.fn.extend({
scrollToMe: function () {
    var x = jQuery(this).offset().top - 100;
    jQuery('html,body').animate({scrollTop: x}, 500);
}});

et ensuite :

$('...').scrollToMe();

facile ;-)

Answer 4

Vérifiez jQuery.ScrollTo si je pense que c'est le comportement que vous voulez, vérifiez le champ Démonstration .

Answer 5

Vérifiez jquery-scrollintoview .

ScrollTo est très bien, mais souvent, vous voulez simplement vous assurer qu'un élément de l'interface utilisateur est visible, pas nécessairement en haut. ScrollTo ne vous aide pas dans ce cas. Extrait du README de scrollintoview :

Comment ce plugin résout-il le problème de l'expérience utilisateur ?

Ce plugin permet de faire défiler un élément particulier dans l'affichage de manière similaire à la fonctionnalité intégrée du navigateur (fonction DOM scrollIntoView()). (la fonction DOM scrollIntoView()), mais fonctionne de manière différemment (et sans doute plus facile à utiliser) :

• il ne défile jusqu'à l'élément que lorsque celui-ci est hors de vue ; si l'élément est en vue (n'importe où dans la zone visible du document), aucun défilement ne sera effectué ;
• il défile en utilisant des effets d'animation ; lorsque le défilement est effectué, les utilisateurs savent exactement qu'ils ne sont pas redirigés quelque part, mais voient en fait qu'ils sont simplement déplacés ailleurs dans la même page (ainsi que la direction ainsi que la direction dans laquelle ils se sont déplacés) ;
• il y a toujours la plus petite quantité de défilement appliquée ; lorsque l'élément est au-dessus de la zone visible du document, il sera défilé jusqu'au haut de la zone visible ; lorsque l'élément est au-dessous de la zone visible, il sera défilé jusqu'au bas de la zone visible. haut de la zone visible ; lorsque l'élément se trouve en dessous de la zone visible, il sera défilement vers le bas de la zone visible ; c'est la façon la plus cohérente de défiler. de défilement - lorsque le défilement se fait toujours vers le haut, il est parfois il n'était pas toujours possible de faire défiler un élément vers le haut lorsqu'il était proche du bas du conteneur de conteneur défilable (le défilement serait donc imprévisible) ;
• lorsque la taille de l'élément dépasse la taille de la zone visible du document, son coin supérieur gauche est celui qui sera défilé ;