CODEWITHSUNDEEP
javascriptjqueryscroll
user1469270
user1469270

Reputation:

Scroll through a sequence of divs — Jquery

I'm trying to get the window to scroll through a sequence of divs. Here is my code, but it is quite targeted, and won't work for more than one div.

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

JSFIDDLE

Is there a way I can then go through each $('.container') on each $('.arrow_down') click?

Upvotes: 1

Views: 255

Answers (3)

phts
phts

Reputation: 3925

You should save the last scrolled container, and scroll to the next one. Something like this:

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++;
});

Upvotes: -1

MDEV
MDEV

Reputation: 10838

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

JSFiddle

Upvotes: 0

Robert Fricke
Robert Fricke

Reputation: 3643

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

jsFiddle

Upvotes: 2

Related Questions