滚动到下一个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);
});