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

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


海绵宝宝撒
浏览 375回答 3
3回答

湖上湖

死简单。不需要插件。var&nbsp;$container&nbsp;=&nbsp;$('div'), &nbsp;&nbsp;&nbsp;&nbsp;$scrollTo&nbsp;=&nbsp;$('#row_8');$container.scrollTop( &nbsp;&nbsp;&nbsp;&nbsp;$scrollTo.offset().top&nbsp;-&nbsp;$container.offset().top&nbsp;+&nbsp;$container.scrollTop());//&nbsp;Or&nbsp;you&nbsp;can&nbsp;animate&nbsp;the&nbsp;scrolling:$container.animate({ &nbsp;&nbsp;&nbsp;&nbsp;scrollTop:&nbsp;$scrollTo.offset().top&nbsp;-&nbsp;$container.offset().top&nbsp;+&nbsp;$container.scrollTop()});这是一个有效的例子。文档scrollTop。

慕的地8271018

我做了这个组合。它为我工作。但如果单击移动,则div面向一个问题,div大小太大,以至于scenerio不会向下滚动到此特定div。&nbsp;var&nbsp;scrollDownTo&nbsp;=$("#show_question_"&nbsp;+&nbsp;nQueId).position().top; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(scrollDownTo); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#slider_light_box_container').animate({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scrollTop:&nbsp;scrollDownTo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;1000,&nbsp;function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
打开App,查看更多内容
随时随地看视频慕课网APP