Comment faire défiler jusqu'à l’élément spécifique à l’aide de jQuery ?

Question

J'ai une grande table avec barre de défilement verticale. Je voudrais faire défiler jusqu'à une ligne spécifique dans ce tableau à l'aide de jQuery/Javascript.

Existe-il des méthodes intégrées pour ce faire?

Voici un petit exemple pour jouer avec.

div {
    width: 100px;
    height: 70px;
    border: 1px solid blue;
    overflow: auto;
}

<div>
    <table id="my_table">
        <tr id='row_1'><td>1</td></tr>
        <tr id='row_2'><td>2</td></tr>
        <tr id='row_3'><td>3</td></tr>
        <tr id='row_4'><td>4</td></tr>
        <tr id='row_5'><td>5</td></tr>
        <tr id='row_6'><td>6</td></tr>
        <tr id='row_7'><td>7</td></tr>
        <tr id='row_8'><td>8</td></tr>
        <tr id='row_9'><td>9</td></tr>
    </table>
</div>

Answer 1

Simple morts. Pas besoin de plugins.

Voici un exemple fonctionnel.

Documentation pour `` .

Answer 2

Je dirais que c’est encore plus simple à la recherche de la réponse acceptée pour atteindre quelque chose :

Ou, pour aller vers le haut de la page :

Ou sans animation :

Answer 3

Je suis d’accord avec Kevin et autres, utiliser un plugin pour cela est inutile.

Answer 4

J’aime celui-ci : http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Voir la démo : http://demos.flesler.com/jquery/scrollTo/

Answer 5

J’ai toujours trouvé le jQuery scrollTo plugin très utile pour cela. Jouer avec la démo pour voir si c’est pour vous.