如何使用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});
我们同时selecthtml和body，因为文档滚动条可能在任何一个上，而且很难确定哪一个。 对于现代浏览器，您可以使用$(document.body) 。
或者，转到页面顶部：
$('html,body').animate({scrollTop: 0});
或者没有animation：
$(window).scrollTop(some_element.offset().top);
要么…
window.scrollTo(0, some_element.offset().top); // native equivalent (x, y)
我同意凯文和其他人，使用插件这是毫无意义的。
window.scrollTo(0, $("#element").offset().top);
我发现最好的插件是这个要点 。
它不是每个插件的插件，但它是一个工作，它解决了我的问题。 不幸的是它只适用于FireFox。 不知道为什么铬不喜欢它/不想运行它。
编辑：同时我设法自己做。 不需要任何插件。 看看我的要点 ：
// Replace #fromA with your button/control and #toB with the target to which // You wanna scroll to. // $("#fromA").click(function() { $("html, body").animate({ scrollTop: $("#toB").offset().top }, 1500); });
我总是发现jQuery的scrollTo插件对此非常有用。 玩演示，看看它是否适合你。
我做了其他人发布的组合。 它简单而stream畅
$('#myButton').click(function(){ $('html, body').animate({ scrollTop: $('#scroll-to-this-element').position().top }, 1000 ); });
不知道为什么没有人说明显，因为有一个内置的JavaScript scrollTo函数：
scrollTo( $('#element').position().top );
参考 。
与大多数人在这里build议的相反，我build议你使用一个插件，如果你想animation的移动。 只是animationscrollTop是不够的，以平稳的用户体验。 看到我的答案在这里的理由。
多年来我一直在尝试一些插件，但最终我自己写了一个。 你可能想给它一个旋转： 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;
再次，看看演示 ，看看它在行动。
对于一个返回目标位置的函数，并且对于窗口和非窗口滚动容器都有效，请随意使用这个要点 。 那里的评论解释了如何计算职位。
在开始的时候，我曾经说过最好使用插件进行animation滚动。 但是，如果您不想跳转到目标，则不需要插件。 请参阅@James的回答 ，但如果容器周围有边框，请确保正确计算目标位置。
你可以在javascript中使用scrollIntoView()方法。 只要给id.scrollIntoView();
例如
row_5.scrollIntoView();
将元素滚动到容器的中心
将元素带到容器的中心。
在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; }
这不是中心的确切，但你不会认可更大的元素。
你可以通过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>
对于什么是值得的，这是我如何设法实现这样的行为的一个普通的元素，可以在一个DIV滚动（不知道容器）
它会创build目标元素高度的虚假input，然后将重点放在该元素上，而且无论您在滚动层次结构中有多深，浏览器都会关心其余部分。 奇迹般有效。
var $scrollTo = $('#someId'), inputElem = $('<input type="text"></input>'); $scrollTo.prepend(inputElem); inputElem.css({ position: 'absolute', width: '1px', height: $scrollTo.height() }); inputElem.focus(); inputElem.remove();
