如何使用jQuery滚动到特定项目？

Question

我有一个带垂直滚动条的大桌子.我想使用jQuery/Javascript滚动到此表中的特定行.

有没有内置的方法来做到这一点？

这是一个可以玩的小例子.

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

死简单.不需要插件.

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

这是一个有效的例子.

文档scrollTop.

Answer 2

我意识到这不会回答容器中的滚动,但人们发现它很有用,所以:

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

我们选择html和body,因为文档滚动条可以在任何一个上,很难确定哪个.对于现代浏览器,您可以逃脱$(document.body).

或者,转到页面顶部:

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

或者没有动画:

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

要么...

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

Answer 3

我同意凯文和其他人的观点,使用插件是没有意义的.

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

Answer 4

我找到的最佳插件就是这个要点.

它不是一个插件,但它完成了一个人的工作,它解决了我的问题.不幸的是它只适用于FireFox.不知道为什么chrome不喜欢它/不想运行它.

编辑:同时我设法自己做.不需要任何插件.看看我的要点:

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

Answer 5

您可以scrollIntoView()在 javascript 中使用方法。就给id.scrollIntoView();

例如

row_5.scrollIntoView();