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

javascript jquery scroll

2022-08-30 00:18:34

我有一个带有垂直滚动条的大桌子。我想使用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>

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

下面是一个工作示例。

滚动顶部的文档。

答案 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)