如何使用jQuery将一行表格滚动到视图（element.scrollintoView）中？
我使用jQuerydynamic添加行到一个表。 该table是在一个有overflow:auto的div overflow:auto从而导致一个垂直滚动条。
我现在想将我的容器div自动滚动到最后一行。 什么是tr.scrollintoView()的jQuery版本？
var rowpos = $('#table tr:last').position(); $('#container').scrollTop(rowpos.top);
应该做的伎俩！
如果您需要滚动到列表中的任意项目（而不是总是在底部），以下方法效果更好：
function scrollIntoView(element, container) { var containerTop = $(container).scrollTop(); var containerBottom = containerTop + $(container).height(); var elemTop = element.offsetTop; var elemBottom = elemTop + $(element).height(); if (elemTop < containerTop) { $(container).scrollTop(elemTop); } else if (elemBottom > containerBottom) { $(container).scrollTop(elemBottom - $(container).height()); } }
仅在必要时才滚动（使用animation）的插件
我已经写了一个jQuery插件 ，它完全按照它所说的（也正是你所要求的 ）。 好的一点是，当元素实际closures时，它只会滚动容器。 否则不会执行滚动。
它的工作原理如下：
$("table tr:last").scrollintoview();
它会自动查找具有多余内容并显示滚动条的最近的可滚动祖先。 所以如果有另一个祖先overflow:auto但不滚动将被跳过。 这样你就不需要提供可滚动的元素了，因为有时候你甚至不知道哪一个是可滚动的（我在我的Sharepoint站点中使用这个插件，而content / master是开发者独立的，所以这是我无法控制的 – HTML可能会改变当网站运作，所以可以滚动容器）。
简单得多：
$("selector for element").get(0).scrollIntoView();
如果多个项目在select器中返回，get（0）将只获得第一个项目。
var elem=jQuery(this); elem[0].scrollIntoView(true);
这个可运行的例子展示了如何使用所有现代浏览器支持的scrollIntoView（）： https ： //developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView#Browser_Compatibility
下面的例子使用jQuery来select#yourid的元素。
$( "#yourid" )[0].scrollIntoView();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p id="yourid">Hello world.</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p>
如果你只是想滚动，你可以使用jQuery的scrollTop方法。 http://docs.jquery.com/CSS/scrollTop
var table = jQuery（'table'）; table.scrollTop（table.find（'tr：last'）.scrollTop（））;
类似的东西也许？
我发现一个案例（溢出div> table> tr> TD）滚动到TR的相对位置不起作用。 相反，我不得不使用scrollTop将溢出容器（div）滚动到<tr>.offset().top - <table>.offset().top 。 例如：
$('#container').scrollTop( $('#tr').offset().top - $('#td').offset().top )
同样从上面几乎没有修改
function foucsMe() { var rowpos = $('#FocusME').position(); rowpos.top = rowpos.top - 30; $('#container').scrollTop(rowpos.top); }
<html> <script src="jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> <body> <input type="button" onclick="foucsMe()" value="focus"> <div id="container" style="max-height:200px;overflow:scroll;"> <table> <tr> <td>1</td> <td></td> </tr> <tr> <td>2</td> <td></td> </tr> <tr> <td>3</td> <td></td> </tr> <tr> <td>4</td> <td></td> </tr> <tr> <td>5</td> <td></td> </tr> <tr> <td>6</td> <td></td> </tr> <tr> <td>7</td> <td></td> </tr> <tr> <td>8</td> <td></td> </tr> <tr> <td>9</td> <td></td> </tr> <tr id="FocusME"> <td>10</td> <td></td> </tr> <tr> <td>11</td> <td></td> </tr> <tr> <td>12</td> <td></td> </tr> <tr> <td>13</td> <td></td> </tr> <tr> <td>14</td> <td></td> </tr> <tr> <td>15</td> <td></td> </tr> <tr> <td>16</td> <td></td> </tr> <tr> <td>17</td> <td></td> </tr> <tr> <td>18</td> <td></td> </tr> <tr> <td>19</td> <td></td> </tr> <tr> <td>20</td> <td></td> </tr> </table> </div> </body> </html>
$( "#yourid" )[0].scrollIntoView();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p> <p id="yourid">Hello world.</p> <p>..</p> <p>..</p> <p>..</p> <p>..</p>
我不能在上面的Abhijit Rao的回答中添加评论，所以我提交这个作为额外的答案。
我需要将表格栏滚动到一个宽的桌子上，所以我添加了滚动左function到function。 正如有人提到，它滚动时，它跳跃，但它为我的目的工作。
function scrollIntoView(element, container) { var containerTop = $(container).scrollTop(); var containerLeft = $(container).scrollLeft(); var containerBottom = containerTop + $(container).height(); var containerRight = containerLeft + $(container).width(); var elemTop = element.offsetTop; var elemLeft = element.offsetLeft; var elemBottom = elemTop + $(element).height(); var elemRight = elemLeft + $(element).width(); if (elemTop < containerTop) { $(container).scrollTop(elemTop); } else if (elemBottom > containerBottom) { $(container).scrollTop(elemBottom - $(container).height()); } if(elemLeft < containerLeft) { $(container).scrollLeft(elemLeft); } else if(elemRight > containerRight) { $(container).scrollLeft(elemRight - $(container).width()); } }
