title: Snap To Top of Div/Element on Scroll
body: <p>Can anyone recommend a "best" approach for snapping the scrollbar to the top of an element when scrolling down a page? </p>
  
  <p>For example, if my layout was as follows:</p>
  
  <pre><code>&lt;div id="section-one" style="width: 100%; height: 600px;"&gt;
      Section One
  &lt;/div&gt;
  
  &lt;div id="section-two" style="width: 100%; height: 600px;"&gt;
      Section Two
  &lt;/div&gt;
  
  &lt;div id="section-three" style="width: 100%; height: 600px;"&gt;
      Section Three
  &lt;/div&gt;
  
  &lt;div id="section-four" style="width: 100%; height: 600px;"&gt;
      Section Four
  &lt;/div&gt;
  </code></pre>
  
  <p>If the user was viewing section one and began browsing down with section two beginning to take part of the browser viewport, I'd like the browser to automatically snap to the top of the next div.</p>
  
  <p>I'm familiar with .scroll() and .scrollTop but a little unsure with where to go from here.</p>