title: jQuery Scroll to Next Div Class with Next / Previous Button
body: <p>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".</p>
  
  <p>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.</p>
  
  <p>Here is the jQuery:</p>
  
  <pre><code>$('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' &amp;&amp; that.next('div.section').length &gt; 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' &amp;&amp; that.prev('div.section').length &gt; 0) {
        //Scroll Function
         $('html, body').animate({scrollTop:that.prev('div.section').scrollTop()});     
    }
  });
  </code></pre>
  
  <p>I am currently working on JSfiddle with heavily commented jQuery to help you digest: <a href="http://jsfiddle.net/ADsKH/1/" rel="nofollow noreferrer">http://jsfiddle.net/ADsKH/1/</a></p>
  
  <p>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.</p>
  
  <p>Why this isn't working as intended?</p>