我有一个大表与垂直滚动条。
我想使用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>
为了它的价值,这就是我如何设法实现这种行为的一般元素,可以在一个DIV内滚动(不知道容器)
它会创建一个目标元素高度的伪输入,然后将焦点放在它上面,无论您在可滚动层次结构中有多深,浏览器都会关心其余的内容。效果非常好。
var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');
$scrollTo.prepend(inputElem);
inputElem.css({
position: 'absolute',
width: '1px',
height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();
我意识到这不能解决在容器中滚动的问题,但人们发现它很有用,所以:
$('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)