滚动到容器中的下一个元素-几乎到了

我遇到了一个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>需要与容器的顶部边缘有一点边距。

我现在的位置：

我有一个类似的问题，罗纳尔钦出色地解决了这个问题，由于这个问题有点相似，我用他的代码创建了一个小提琴。

摆弄已解决的问题（查看代码的作用）

解决这个问题（显然不适用于相同的jquery）

我认为代码基本上只需要一点重新排列就可以适应新的情况。

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

我非常擅长向正确的方向推进。非常感谢。