javascript - 滚动浏览一系列 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++;
});