滚动到下一个div

Question

I've got the following code. At the moment, it only scrolls down the height of a variable.

http://jsfiddle.net/tmyie/gF6U3/1/

$('.col100').click(function(e){
    e.preventDefault();
    var H = $('.col100').outerHeight();
    $('html, body').animate({scrollTop: H}, 200);   
});

Questions:

• Why is it only scrolling once?
• Could it be better implemented: so it scrolls through each sibling with each click?

Answer 1

You are scrolling to the same position each time. Easiest would be to calculate the offset position of the next box:

http://jsfiddle.net/B472g/

$('.col100').click(function(e){
    e.preventDefault();
    var H = $(this).next().offset().top;
    $('html, body').animate({scrollTop: H}, 200);   
});

Note that this doesn't handle what to do at the last box.. depends on how you want to implement it.

Answer 2

use this - http://jsfiddle.net/gF6U3/3/

$('.col100').click(function(e){
    e.preventDefault();
    var H = $(this).next('.col100').offset().top;
    $('html, body').animate({scrollTop: H}, 200);
});