title: JQuery - How to make a button scroll to next div, but respond if scrolled up
body: <p>So my dilemma is this:</p>
  
  <p>I want a button on my website that is fixed to the screen and after being clicked will scroll you to the next element in the body. <strong>BUT</strong> I also want it to know if you have scrolled up and update whichever is the next element accordingly. For example, if you have clicked the button twice you are on the 3rd paragraph, but if you scroll back up to the second and click the button again, it should take you to the 2nd paragraph again.</p>
  
  <p>How can I accomplish this?</p>
  
  <p>Heres the type of function I'm looking at for scrolling the view</p>
  
  <pre><code>$(document).ready(function(){
      var attr = $("p").first();
      $('.button').click(function() {
         attr=attr.next();
         $("html, body").animate({
           scrollTop: $(attr).offset().top
      }, 700);
      });
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="button"&gt;NEXT&lt;/div&gt;
  
  &lt;h1&gt;Welcome to My Homepage&lt;/h1&gt;
  
  &lt;p&gt;This is the first paragraph.&lt;/p&gt;
  &lt;p&gt;This is the second paragraph.&lt;/p&gt;
  &lt;p&gt;This is the third paragraph.&lt;/p&gt;
  &lt;p&gt;This is the last paragraph.&lt;/p&gt;
  </code></pre>
  
  <p>Here's a plunker example: <a href="http://plnkr.co/edit/5nNcroXUXespRw1P8jZt?p=info" rel="nofollow">http://plnkr.co/edit/5nNcroXUXespRw1P8jZt?p=info</a></p>
  
  <p>How can I make this change as you scroll up?</p>