web-dev-qa-db-fra.com

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

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

document.location.href="#branch1";

Mais comme j'utilise également jQuery dans mon application Web, je souhaite donc utiliser le code ci-dessus dans jQuery. J'ai essayé mais je ne sais pas pourquoi ça ne marche pas,

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

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

S'il vous plaît dites-moi, comment puis-je me concentrer sur un div elemnt en utilisant jQuery?

Merci!

javascriptjqueryhtmlfocus
67
Prashant

Vérifiez jQuery.ScrollTo , je pense que c'est le comportement que vous voulez, vérifiez la démo .

32
CMS

Pour mon problème, ce code fonctionnait, je devais accéder à une balise d'ancrage au chargement de la page:

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

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

108
Banning

Comme @ user293153, je viens tout juste de découvrir cette question et il ne semblait pas y répondre correctement.

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

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

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 alors:

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

facile ;-)

37
MCurbelo

Découvrez jquery-scrollintoview .

ScrollTo est correct, mais vous voulez souvent simplement vous assurer qu'un élément de l'interface utilisateur est visible, pas nécessairement au sommet. ScrollTo ne vous aide pas avec ça. De README de scrollintoview:

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

Ce plugin fait défiler un élément particulier dans la vue similaire à navigateur fonctionnalité intégrée (fonction scrollIntoView () de DOM), mais fonctionne différemment (et sans doute plus convivial):

  • il ne fait défiler à l'élément lorsque l'élément est réellement hors de vue; si l'élément est en vue (n'importe où dans la zone de document visible), pas de défilement sera réalisée;
  • il défile en utilisant des effets d'animation; lors du défilement, les utilisateurs savent exactement qu'ils ne sont redirigés nulle part, mais qu'ils voient en fait qu'ils sont simplement déplacés quelque part dans la même page (ainsi que dans 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 de document visible, il passe au sommet de la zone visible; quand l'élément est en dessous du visible, il le sera fait défiler vers le bas de la zone visible; c'est le plus cohérent moyen de défilement - lorsque le défilement serait toujours au sommet parfois ne pouvait pas faire défiler un élément vers le haut quand il était proche du bas 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 de document visible, son coin supérieur gauche correspond à celui sur lequel vous souhaitez faire défiler l'écran;
4
Jonathan Tran

Utilisation 

$ (fenêtre) .scrollTop ()

Cela fera défiler la fenêtre jusqu'à l'élément.

 var scrollPos =  $("#branch1").offset().top;
 $(window).scrollTop(scrollPos);
2
Nishad Up

Je pense que vous êtes peut-être à la recherche d'une "ancre", à cause de votre exemple.

<a href="#jump">This link will jump to the anchor named jump</a>
<a name="jump">This is where the link will jump to</a>

La méthode focus jQuery fait quelque chose de différent de ce que vous essayez d'atteindre.

1
Luca Matteis

Pour que la fonction focus () fonctionne sur l'élément, la div doit avoir un attribut tabindex. Ce n'est probablement pas fait par défaut sur ce type d'élément car ce n'est pas un champ de saisie. Vous pouvez ajouter un tabindex par exemple à -1 pour empêcher les utilisateurs qui utilisent tab de se concentrer dessus. Si vous utilisez un tabindex positif, les utilisateurs pourront utiliser tab pour se concentrer sur l'élément div.

Voici un exemple: http://jsfiddle.net/klodder/gFPQL/

Cependant, tabindex n'est pas pris en charge dans Safari.

0
Klodder