如何使用jQuery滚动到特定项目?
我有一个垂直滚动条的大桌子。 我想使用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>
死简单。 无需插件 。
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
文档。
我意识到这不会回答在容器中滚动,但人们发现它很有用,所以:
$('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)
我同意Kevin和其他人的看法,对此使用插件是毫无意义的。
window.scrollTo(0, $("#element").offset().top);
链接地址: http://www.djcxy.com/p/3939.html