如何使用jQuery滚动到特定项目？

Question

如何使用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>

Answer 1

死简单。不需要插件。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。

Answer 2

我做了这个组合。它为我工作。但如果单击移动，则div面向一个问题，div大小太大，以至于scenerio不会向下滚动到此特定div。 var scrollDownTo =$("#show_question_" + nQueId).position().top;         console.log(scrollDownTo);         $('#slider_light_box_container').animate({             scrollTop: scrollDownTo            }, 1000, function(){         });         }