title: Javascript: scroll from one div to the other when scrolling?
body: <p>I want to be able, when scrolling down, to go directly to the next div, and when scrolling up, to go directly to the previous div.
  Here are my files with an example with two divs:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    var lastScrollTop = 0;
  
    function findPos(obj) {
      var curtop = 0;
      if (obj.offsetParent) {
        do {
          curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return [curtop];
      }
    }
  
    $(window).scroll(function(event) {
      var st = $(this).scrollTop();
      if (st &gt; lastScrollTop) {
        $('html, body').animate({
          scrollTop: $("#space_od").offset().top
        }, 500);
      } else {
        $('html, body').animate({
          scrollTop: $("#black_hole").offset().top
        }, 500);
      }
      lastScrollTop = st;
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding: 0;
    margin: 0;
  }
  
  #black_hole {
    background-image: url("black_hole.jpg");
    background-position: center;
    display: block;
    height: 100vh;
    width: 100%;
  }
  
  #space_od {
    background-image: url("2001.png");
    background-position: center;
    display: block;
    height: 100vh;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="black_hole"&gt;
  &lt;/div&gt;
  &lt;div id="space_od"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It seems to work fine when scrolling down the first time, but not when scrolling up, it seems to move a few pixels and then stop. Any ideas?</p>