Я хочу иметь возможность при прокрутке вниз перейти непосредственно к следующему разделу, а при прокрутке вверх перейти непосредственно к предыдущему разделу. Вот мои файлы с примером с двумя div:

$(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>

Кажется, что работает нормально при прокрутке вниз в первый раз, но не при прокрутке вверх, кажется, сдвинуть несколько пикселей, а затем остановиться. Есть идеи?