滚动到下一个div

Question

我有以下代码。目前，它只向下滚动变量的高度。

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

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

问题：

• 为什么只滚动一次？
• 可以更好地实现：所以每次点击都会滚动每个兄弟姐妹吗？

Answer 1

每次都滚动到相同的位置。最简单的方法是计算下一个方框的偏移位置：

http://jsfiddle.net/B472g/

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

请注意，这不会处理在最后一个框中执行的操作..取决于您希望如何实现它。

Answer 2

使用此 - http://jsfiddle.net/gF6U3/3/

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