Bug on fullscreen scrolling website

Question

I’m trying to make a fullscreen scrolling website. That is, I do not want the scroll to stop in the middle of a section but identify if it comes from below or from above and animate to the top of the respective section. I have the following code however, it seems that the animation scroll (scrollTop) conflicts with the page scroll and I can’t get out of section 1.

var lastScrollTop = 0;
$(window).on('scroll', function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       $('html, body').stop().animate({
       		scrollTop: $('section').eq(1).offset().top
       }, 100);
   } else {
   		$('html, body').stop().animate({
       		scrollTop: $('section').eq(0).offset().top
       }, 100);
   }
   lastScrollTop = st;
});

section {
  height: 600px;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="red">
  
</section>
<section class="blue">
  
</section>

Answer 1

I think the logic of your code storing a value in lastScrollTop is causing conflict. Look, even though section from below any scroll which, at the very least, is less than the lastScrollTop, will do the scroll go up to the first section, which should not occur because of the content of the question.

You can use the plugin Scrollify that already has that effect:

$.scrollify({
   section : ".blue",
   interstitialSection : ".red",
   easing: "linear",
   scrollSpeed: 500,
   offset : 0,
   scrollbars: true,
   setHeights: true,
   overflowScroll: true,
   updateHash: false,
   touchScroll:true
});

section {
  height: 600px;
}
.red {
  background-color: red;
}
.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.19/jquery.scrollify.min.js"></script>
<section class="red">
  
</section>
<section class="blue">
  
</section>