Scroll 使用jQuery滚动div中的内容

我试图在一个div中垂直滚动内容。但是，我希望它能够循环，这样当div中的最后一个项目到达容器顶部时，第一个项目会跟随它，如果第一个项目已经在容器顶部，我不希望“上一步”按钮起作用，但我不确定如何执行这两件事。任何帮助都将不胜感激

HTML

CSS

---

如果希望它循环，可以进行一个测试，每次div的垂直位置超出边界时，它都会移动到堆的底部，并在向上滚动时反转。实际上，您只需使用$.remove（）、$.append（）、$.clone（）按正确的顺序剪切和粘贴元素

<div class="container">
<div class="block block-1">1</div>
<div class="block block-2">2</div>
<div class="block block-3">3</div>
<div class="block block-4">4</div>
<div class="block block-5">5</div>
<div class="block block-6">6</div>
</div>
<button id="prev">Previous</button>
<button id="next">Next</button>

$( "#prev" ).click(function() 
    {
        $( ".block" ).animate({ "top": "+=50px" }, "slow" );
    });

$( "#next" ).click(function()
    {
        $( ".block" ).animate({ "top": "-=50px" }, "slow" );
    });

.container
        {
            position: relative;
            background-color: #f5f5f5;
            width: 590px;
            height: 330px;
            overflow: hidden;
            font-family: arial, sans;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
        }

.block 
        {
            position: absolute;
            width: 90px;
            height: 90px;
            color: #fff;
        }

.block-1
        {
            background-color: #900;
        }

.block-2
        {
            top: 100px;
            background-color: #090;
        }

.block-3
        {
            top: 200px;
            background-color: #009;
        }

.block-4
        {
            top: 300px;
            background-color: #990;
        }

.block-5
        {
            top: 400px;
            background-color: #909;
        }

.block-6
        {
            top: 500px;
            background-color: #099;
        }