滚动一系列div - Jquery

Question

我正试图让窗口滚动一系列div。这是我的代码，但它非常有针对性，并且不适用于多个div。

    $('.down_arrow').click(function(e){
    $('html, body')
        .animate({scrollTop:$('.two')
        .offset()
        .top }, 'slow');
});

JSFIDDLE

我是否有办法在每次$('.container')点击时检查每个$('.arrow_down')？

Answer 1

$('.down_arrow').click(function(e){
    $('html, body')
        .animate(
        {
            scrollTop:$(this).closest('.container').next().offset().top 
        }, 'slow');
});

jsFiddle

Answer 2

$('.down_arrow').click(function(e) {
    var next_container = $(this).parents(".container").next(".container");
    $('html, body')
    .animate({ scrollTop:next_container.offset().top }, 'slow');
});

JSFiddle

Answer 3

您应该保存最后滚动的容器，然后滚动到下一个容器。 像这样：

var currentContainerIndex = 0;

$('.down_arrow').click(function(e){
  var currentContainer = $($('.container')[currentContainerIndex]);
  if (!currentContainer.size()) {
    currentContainerIndex = 0;
    currentContainer = $($('.container')[currentContainerIndex]);
  }
  $('html, body').animate({scrollTop:currentContainer.offset().top }, 'slow');
  currentContainerIndex++;
});