jQuery Scroll to Next Div Class with Next / Previous Button

Question

What I'd like is for the fixed navigation, with NEXT and PREV buttons to basically scroll the page to the next div with the class of "section".

I've setup jQuery to essentially add a click function to the NEXT and PREV hrefs. This click function will then use ScrollTop to move to the next duv with a class of .section.

Here is the jQuery:

$('div.section').first();
// binds a click event-handler to a elements whose class='display'
$('a.display').on('click', function(e) {
    // prevents the default action of the link
    e.preventDefault();
    // assigns the text of the clicked-link to a variable for comparison purposes
    var t = $(this).text(),
      that = $(this);
      console.log(that.next())    
      // checks if it was the 'next' link, and ensures there's a div to show after the currently-shown one
      if (t === 'next' && that.next('div.section').length > 0) {
      //Scroll Function
      $('html, body').animate({scrollTop:that.next('div.section').scrollTop()});
  } 
    // exactly the same as above, but checking that it's the 'prev' link
    else if (t === 'prev' && that.prev('div.section').length > 0) {
      //Scroll Function
       $('html, body').animate({scrollTop:that.prev('div.section').scrollTop()});     
  }
});

I am currently working on JSfiddle with heavily commented jQuery to help you digest: http://jsfiddle.net/ADsKH/1/

I have a console.log currently checking for (that.next()) to determine what the next .section will be, but it's giving me back some very weird results.

Why this isn't working as intended?

Answer 1

Your that can't find a .next('.section') because it's nested inside .navigation.

From the jQuery documentation for .next().

Get the immediately following sibling of each element in the set of matched elements.

Here's a working example based on your code