Jquery 滚动divs，自动调整高度和位置

我需要滚动div中的内容块，每个块之间需要相等的空间，但我无法预测每个块的高度是否完全相同，有些可能有四行，有些可能有三行。然而，我让滚动条工作的唯一方法是为每个块指定一个特定的高度和位置。如果线的数量（因此块的高度）不同，有没有办法达到相同的结果

这是我的

HTML

jQuery

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

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

---

不要单独移动每个块，而是尝试添加一个包装容器并将其移动到“容器”分区内。小提琴：

$（“#prev”）。单击（函数（）{
$（“.scroll body”）.animate({
“顶部”：“+=50px”
}“慢”）；
});
$（“#下一步”）。单击（函数（）{
$（“.scroll body”）.animate({
“顶部”：“-=50px”
}“慢”）；
});
.container{
位置：相对位置；
背景色：#F5；
宽度：590px；
高度：330px；
溢出：隐藏；
字体系列：arial，sans；
字体大小：粗体；
文本对齐：居中；
边缘底部：20px；
}
.卷轴体{
位置：绝对位置；
}
.街区{
宽度：90px；
最小高度：90px；
颜色：#fff；
边缘底部：10px；
}
1号楼{
背景色：#900；
}
.第2区{
背景色：#090；
}
.第3区{
背景色：#009；
}
.第4区{
背景色：#990；
}
.第5区{
背景色：#909；
}
.第6区{
背景色：#099；
}

1.
2.
3.
4.
5.
6.
以前的
接下来
如果我理解正确，您需要一种方法来检查块的高度，以确定滚动的距离。或许以下内容可以作为某种启发：


var currentBlock=1，
max=$（'.container.block'）.length；
$（“#prev”）。单击（函数（）{
如果（当前块>1）{
var previous=当前块-1；
var h=$（'.block-'+previous）.height（）+5；
$（“.block-1”）.animate（{“边距顶端”：“+=”+h+“px”}，“慢”）；
电流块--；
}
});
$（“#下一步”）。单击（函数（）{
如果（当前块<最大值）{
var h=$（'.block-'+currentBlock）.height（）+5；
$（'.block-1'）。动画（{“页边空白顶部”：“-=”+h+“px”}，“慢速”）；
currentBlock++；
}
});

.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;
        }

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

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

var currentBlock = 1,
    max = $('.container .block').length;

$( "#prev" ).click(function() {
    if(currentBlock > 1) {
        var previous = currentBlock-1;
        var h = $('.block-' + previous).height() + 5;
        $( ".block-1" ).animate({ "margin-top": "+=" + h + "px" }, "slow" );
        currentBlock--;
    }
});

$( "#next" ).click(function() {
    if(currentBlock < max) {
        var h = $('.block-' + currentBlock).height() + 5;
        $( '.block-1' ).animate({ "margin-top": "-=" + h + "px" }, "slow" );
        currentBlock++;
    }
});