Javascript: rolar de uma div para a outra ao rolar?

Eu quero poder, ao rolar para baixo, ir diretamente para a próxima div e, ao rolar para cima, ir diretamente para a div anterior. Aqui estão meus arquivos com um exemplo com duas divs:

$(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 > lastScrollTop) {
      $('html, body').animate({
        scrollTop: $("#space_od").offset().top
      }, 500);
    } else {
      $('html, body').animate({
        scrollTop: $("#black_hole").offset().top
      }, 500);
    }
    lastScrollTop = st;
  });
});
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%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="black_hole">
</div>
<div id="space_od">
</div>

Parece funcionar bem ao rolar para baixo pela primeira vez, mas não ao rolar para cima, parece mover alguns pixels e depois parar. Alguma ideia?

questionAnswers(1)

yourAnswerToTheQuestion