title: Scroll to top of each section on click
body: <p>I have a very long page broken up into <code>&lt;section&gt;</code> tags. There is fixed position navigation that will scroll up and down the page. I need each press of the 'down' button to scroll the next <code>&lt;section&gt;</code> to the top of the page. Same goes for the 'up' button, it should scroll the previous <code>&lt;section&gt;</code> to the top of the page. I don't want to have to include an instance of the navigation in each section with specified scrollTo function. I would rather it be more universal. If there were a link in each section, it would be simpl. However, the navigation is position:fixed, so I can't use .next() or .closest(). I'm thinking I have to index the number of sections and step through them?</p>
  
  <p>This works only on the first press:</p>
  
  <pre><code>$('#scrollWindowUp').click(function(e){
      e.preventDefault();
      $('html, body').animate({ scrollTop: ($('section').next().offset().top)},500);
  });
  
  $('#scrollWindowDown').click(function(e){
      e.preventDefault();
      $('html, body').animate({ scrollTop:($('section').prev().offset().top)},500);
  });
  </code></pre>
  
  <p>Here is a <a href="http://jsfiddle.net/435h088z/" rel="nofollow">fiddle</a></p>
  
  <p>Each section is the height of the viewport, so you only see one at a time. I am just grabbing the <code>$('window').height();</code> and applying it to the <code>&lt;section&gt;</code> so they fill the window. I've tried using that calculation to do the scrolling, but it is always off a little.</p>