滚动列表项以使其可见？

Question

我有一个包含大量元素的列表.通常需要滚动条来显示所有内容.我在运行时将项添加到列表中.有没有办法滚动特定的列表元素,以确保它是可见的？:

<ul id='parent'>
  <li>blah</li>
  ...
  <li id='nthItem'>blah</li>
</ul>

$('#parent').scrollChildToVisible('nthItem');

这样的事情？

谢谢

Answer 1

要滚动到可以使用.animate()的元素.

这是一个滚动到jQuery选择器(如ID)的函数示例:

  // This is a function that scrolls to $(selector)
function goToByScroll(selector){
      // Scroll
    $('html,body').animate({
        scrollTop: $(selector).offset().top},
        'slow');
}

您可以在必要时触发此功能.例如,在您添加了相关元素之后:

  // Append item
$("#parent").append("<li id='nthItem'>blah</li>");

  // Scroll to item using function above. 
goToByScroll("#nthItem");

jsFiddle例子

最后,选择一个id在jQuery中使用

$("#nthItem") // correct for an ID

不

$("nthItem") // incorrect