滚动到容器中的下一个元素 - 几乎就在那里

Question

我正在努力解决jquery问题。

我认为我接近解决方案，但此刻我一直磕磕绊绊。

所以我的标记（简称）看起来像这样：

<div class="col">
    Content
   <div class="scroll-container">
      <ul>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
      </ul>
   </div>
<a href="#" class="scroll">scroll down</a>
</div>

基本上是.col，其中包含容器和按钮。

---

计划：

1）点击按钮容器后，应向下滚动到下一个<li>。

2）当到达最后一个<li>时，再次滚动到第一个 <li>。所以我需要一个循环。

3）<li>的数字和尺寸可能会因具体情况而异。 所以基本上按钮应该只是将下一个<li>滚动到容器的顶部。

4）滚动的<li>需要在容器的上边缘有一点边距。

---

我在哪里：

我有一个类似的问题，由ronalchn出色地解决了，因为问题有点相似，我已经根据他的代码创建了一个小提琴。

Fiddle with the solved problem（查看行动中的代码）

Fiddle with the this problem （显然不能使用相同的jquery）

我认为代码基本上只有需要重新安排工作与新情况。

我已经尝试了几个小时，但似乎这仍然超出了我目前对jquery的理解水平。

对于任何朝着正确方向的努力，我都非常感激。谢谢。

Answer 1

在这里：http://jsfiddle.net/UQsv9/7/

CSS更改：已将position: relative添加到您的ul

我正在使用$.fn.data存储当前孩子，从那里只使用两个偏移之间的差异来计算新的top。