Défilement automatique jusqu'à l'élément travée

Question

J'ai un élément qui contient (surprise!) Un article.

Il existe une liste de balises en haut de la page qui se trouvent dans l'article. Lorsqu'un utilisateur clique sur une étiquette, les mots correspondants de l'article sont mis en surbrillance.

Ce qui me pose problème, c'est alors de faire défiler automatiquement le mot en surbrillance.

Y a-t-il un moyen de le faire avec javascript/jQuery?

Ce qui suit est mon code pour trouver le mot et le mettre en évidence:

$(".article-tags a.toggle").live("click", function() { 
     var $this = $(this); 
     var $p = $this.closest("p"); 
     if ($p.find("span.highlight").length == 0) { 
      $("#viewer .article-body").highlight($this.text()); 
      $this.highlight($this.text()); 
      document.getElementById("viewer").scrollTop = $p.find("span.highlight").offsetTop; 
     } 
     else { 
      $("#viewer .article-body").removeHighlight(); 
      $p.removeHighlight(); 
     } 
     return false; 
    }); 

Merci.

Answer 1

Plusieurs façons d'accomplir cela.

• jQuerys .animate() avec scrollTop mis à elements.offset().top
• $(window).scrollTop(element.offset().top);
• element.scrollIntoView();

.scrollIntoView() est une méthode native que vous pouvez faire appel à un nœud DOM directement.

Answer 2

$('span.highlight').first().prepend('<a class="highlighted" name="hightlighted" />'); 
window.location.hash = '#highlighted'; 

Cela devrait le faire. Vous ajoutez une ancre juste avant l'élément, puis faites défiler jusqu'à l'élément. Vous voudrez peut-être mettre un $('a.highlighted').remove() avant cela pour effacer les ajouts précédents.