我有一个大表与垂直滚动条。 我想使用jQuery/JavaScript滚动到这个表中的特定行。

是否有内置的方法来做到这一点?

Here is a little example to play with. 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>


当前回答

你可以在javascript中使用scrollIntoView()方法。 只需要给id.scrollIntoView();

例如

row_5.scrollIntoView();

其他回答

与这里大多数人的建议相反,如果你想让移动动画化,我建议你使用插件。仅仅对scrollTop进行动画化是不足以获得流畅的用户体验的。在这里可以看到我的答案。

这些年来,我尝试了许多插件,但最终还是自己写了一个。你可能想让它旋转一下:jQuery.scrollable。使用它,滚动动作变成

$container.scrollTo( targetPosition );

但这还不是全部。我们还需要确定目标位置。你在其他答案中看到的计算,

$target.offset().top - $container.offset().top + $container.scrollTop()

大部分是可行的,但并不完全正确。它不能正确地处理滚动容器的边界。目标元素向上滚动得太远了,按边框的大小。这里是一个演示。

因此,计算目标位置的更好方法是

var target = $target[0], 
    container = $container[0];

targetPosition = $container.scrollTop() + target.getBoundingClientRect().top - container.getBoundingClientRect().top - container.clientTop;

同样,看一下演示,看看它是如何运行的。

对于返回目标位置并同时适用于窗口和非窗口滚动容器的函数,可以使用以下要点。这里的注释解释了如何计算位置。

在一开始,我说过最好使用动画滚动插件。然而,如果你想在没有转换的情况下跳转到目标,你不需要一个插件。请参阅@James的答案,但如果容器周围有边框,请确保正确计算目标位置。

我意识到这不能解决在容器中滚动的问题,但人们发现它很有用,所以:

$('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)

死很简单。不需要插件。

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 scrollTo插件插件:

$('div').scrollTo('#row_8');

我同意Kevin和其他人的观点,使用插件是没有意义的。

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