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

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> 的 数字 和 size 可能会因情况而异。 所以基本上按钮应该只是滚动下一个<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。