¿Cómo desplazarse a un elemento específico usando jQuery?

Tengo una mesa grande con barra de desplazamiento vertical. Me gustaría desplazarme a una línea específica de esta tabla usando jQuery/JavaScript.

¿Existen métodos integrados para hacer esto?

Aquí tienes un pequeño ejemplo para jugar.

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>

Expandir fragmento

May 25 '10 22:05 Misha Moroshko

Muy simple. No se necesitan complementos .

var $container = $('div'),
    $scrollTo = $('#row_8');

$container.scrollTop(
    $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
);

// Or you can animate the scrolling:
$container.animate({
    scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
});

A continuación se muestra un ejemplo práctico .

Documentación parascrollTop .

May 25 '2010 15:05 James

Me doy cuenta de que esto no responde al desplazamiento en un contenedor, pero a la gente le resulta útil:

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

Seleccionamos tanto html como body porque el desplazamiento del documento podría estar en cualquiera de los dos y es difícil determinar cuál. Para los navegadores modernos, puedes salirte con la tuya $(document.body).

O bien, para ir al principio de la página:

$('html,body').animate({scrollTop: 0});

O sin animación:

$(window).scrollTop(some_element.offset().top);

O...

window.scrollTo(0, some_element.offset().top); // native equivalent (x, y)

Jan 23 '2013 21:01 Dominic

Estoy de acuerdo con Kevin y otros, usar un complemento para esto no tiene sentido.

window.scrollTo(0, $("#element").offset().top);

Sep 04 '2013 09:09 Fredrik Stolpe

Logré hacerlo yo mismo. No es necesario ningún complemento. Mira mi esencia :

// Replace #fromA with your button/control and #toB with the target to which     
// You wanna scroll to. 
//
$("#fromA").click(function() {
    $("html, body").animate({ scrollTop: $("#toB").offset().top }, 1500);
});

Oct 07 '2012 19:10 lorddarq