jquery - 滚动列表项使其变得可见？

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 example

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

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

不是

$("nthItem") // incorrect