如何使用jQuery滚动到特定项目？ [英] How to scroll to specific item using jQuery?

问题描述

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

I have a big table with vertical scroll bar. I would like to scroll to a specific line in this table using jQuery/Javascript.

是否有内置方法可以执行此操作？

Are there built-in methods to do this?

这是一个可以使用的小例子。

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>

推荐答案

死简单。 无需插件。

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 。

这篇关于如何使用jQuery滚动到特定项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！