我有一个大表与垂直滚动条。
我想使用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;
}
它不是精确的中心，但在更大的元素上你不会认出它。
与这里大多数人的建议相反，如果你想让移动动画化，我建议你使用插件。仅仅对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的答案，但如果容器周围有边框，请确保正确计算目标位置。
你可以通过jQuery和JavaScript滚动
只需要两个元素的jQuery和这个JavaScript代码:
$(function() {
// Generic selector to be used anywhere
$(".js-scroll-to-id").click(function(e) {
// Get the href dynamically
var destination = $(this).attr('href');
// Prevent href=“#” link from changing the URL hash (optional)
e.preventDefault();
// Animate scroll to destination
$('html, body').animate({
scrollTop: $(destination).offset().top
}, 1500);
});
});
$(function() {
// Generic selector to be used anywhere
$(".js-scroll-to-id").click(function(e) {
// Get the href dynamically
var destination = $(this).attr('href');
// Prevent href=“#” link from changing the URL hash (optional)
e.preventDefault();
// Animate scroll to destination
$('html, body').animate({
scrollTop: $(destination).offset().top
}, 1500);
});
});
#pane1 {
background: #000;
width: 400px;
height: 400px;
}
#pane2 {
background: #ff0000;
width: 400px;
height: 400px;
}
#pane3 {
background: #ccc;
width: 400px;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>
<a href="#pane1" class=" js-scroll-to-id">Item 1</a>
</li>
<li>
<a href="#pane2" class="js-scroll-to-id">Item 2</a>
</li>
<li>
<a href="#pane3" class=" js-scroll-to-id">Item 3</a>
</li>
</ul>
<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>
<!-- example of a fixed nav menu -->
<ul class="nav">
<li>
<a href="#pane3" class="js-scroll-to-id">Item 1</a>
</li>
<li>
<a href="#pane2" class="js-scroll-to-id">Item 2</a>
</li>
<li>
<a href="#pane1" class="js-scroll-to-id">Item 3</a>
</li>
</ul>
