我有一个大表与垂直滚动条。
我想使用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>
滚动元素到容器的中心
将元素移到容器的中心。
在CODEPEN上演示
JS
function scrollToCenter() {
var container = $('.container'),
scrollTo = $('.5');
container.animate({
//scrolls to center
scrollTop: scrollTo.offset().top - container.offset().top + scrollTo.scrollTop() - container.height() / 2
});
}
HTML
<div class="container">
<div class="1">
1
</div>
<div class="2">
2
</div>
<div class="3">
3
</div>
<div class="4">
4
</div>
<div class="5">
5
</div>
<div class="6">
6
</div>
<div class="7">
7
</div>
<div class="8">
8
</div>
<div class="9">
9
</div>
<div class="10">
10
</div>
</div>
<br>
<br>
<button id="scroll" onclick="scrollToCenter()">
Scroll
</button>
css
.container {
height: 60px;
overflow-y: scroll;
width 60px;
background-color: white;
}
它不是精确的中心,但在更大的元素上你不会认出它。
我意识到这不能解决在容器中滚动的问题,但人们发现它很有用,所以:
$('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)