Scrolling divs, adjusting height and position automatically

Question

I need to scroll blocks of content in a div and I need equal space between each block but I can't really predict that the height of each block will be exactly the same, some might have four lines, some might have three. However the only way I got my scroller to work was to assign each block a specific height and position. Is there a way I can achieve the same result if the number of lines (and therefore height of the block) varies?

Here is my JSFIDDLE

HTML

<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>

CSS

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

jQuery

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

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

Answer 1

If I understand you correctly you need a way to check the height of the blocks to determine how far to scroll. Maybe the following could serve as some kind of inspiration:

Fiddle here

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++;
    }
});