jquery自动滚动当前li是什么

Question

我有一些ajax动态菜单流程，见下面的代码。

ul{width:80px;height:200px;border:1px solid #ccc;list-style:none;overflow-y:auto;overflow-x:hidden}
.li{float:left;width:60px;padding:3px 5px;border-bottom:1px solid #ccc;font:16px/20px arial;}
.current{color:#f00}

<ul>
    <li class="li">item1</li>
    <li class="li">item2</li>
    <li class="li">item3</li>
    <li class="li">item4</li>
    <li class="li">item5</li>
    <li class="li">item6</li>
    <li class="li current">item7</li>
    <li class="li">item8</li>
    <li class="li">item9</li>
    <li class="li">item10</li>
    <li class="li">item11</li>
    <li class="li">item12</li>
    <li class="li">item13</li>
    <li class="li">item14</li>
    <li class="li">item15</li>
    <li class="li">item16</li>
    <li class="li">item17</li>
    <li class="li">item18</li>
    <li class="li">item19</li>
    <li class="li">item20</li>
</ul>

我想像这些图片一样修复当前的li位置（我的英文不太好，截图可能会让你知道我需要什么）：

1. 如果当前li位置小于15，则自动滚动ul并在顶部的第二个位置显示当前li。





1. 如果currnet li位置小于14，则在页面加载（滚动结束）时自动将ul滚动到底部。



但如何制作呢？首先应该计算ajax加载后ul中有多少li？以及如何控制scorll位置？这是在线演示。感谢。

http://jsfiddle.net/eV7ce/

Answer 1

如果要滚动到当前列表项的位置，可以使用animate()和position()方法：

$('ul').animate({
    scrollTop: $('.current').prev().position().top
}, 1000);

要获取当前列表项的位置，您可以使用index()方法：

var n = $('ul li').index($('.current')) + 1;

我不太确定你的逻辑，但是你可以使用这两个样本来达到你想要的效果。