javascript - Hur scrollar man till ett specifikt objekt med jQuery?

Jag har ett stort bord med vertikal rullningslist. Jag skulle vilja rulla till en specifik rad i detta bord med jQuery/JavaScript.

Finns det inbyggda metoder för att göra detta?

Här är ett litet exempel att leka med.

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>

Svar #1

Superenkelt. Inga tillägg behövs.

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()
});

Här är ett fungerande exempel.

Dokumentation för scrollTop.

Svar #2

Jag inser att detta inte svarar på rullning i en behållare, men folk tycker att det är användbart, så:

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

Vi väljer både html och body eftersom dokumentscrollern kan vara på vilken som helst och det är svårt att avgöra vilken. För moderna webbläsare kan du klara dig med $ (document.body).

Eller, för att gå till toppen av sidan:

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

Eller utan animation:

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

ELLER...

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

Svar #3

Jag håller med Kevin och andra, att använda ett tillägg för detta är meningslöst.

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

Svar #4

Jag lyckades göra det själv. Ingen behov av några plugins. Kolla in mitt gist:

// 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);
});

Relaterade artiklar