Do not let the scroll stay in the middle, stay in one element or another

Before long I wanted to apologize for the title of the question, I could not find a better way to explain it. What I want is a 'normal' page, which has for example: 5 sections, I wanted the scroll not to see half of one and half of another, ie at the end of mousewhell event or scroll 'manual', page either immediately to the next or previous element (depending on the direction, up or down) but never between the two. my case in the jsfiddle so far.

HTML:

<div id="acti1" class="acti" data-scrollTo="1"></div>
<div id="acti2" class="acti" data-scrollTo="2"></div>
<div id="acti3" class="acti" data-scrollTo="3"></div>
<div id="acti4" class="acti" data-scrollTo="4"></div>
<div id="acti5" class="acti" data-scrollTo="5"></div>

JS:

var navHeight = $('nav').height();
$('.acti').height($(window).height() - navHeight);

var rmLast = parseInt($('.acti').last().attr("data-scrollTo")) - 1;
$('.acti').slice(0, rmLast).click(function(){
    var scrollTo = parseInt($(this).attr("data-scrollTo"));
    $('body, html').stop().animate({
        scrollTop: $('.acti').eq(scrollTo).offset().top - navHeight
        });
    });

$(window).scroll(function(){
    ....
});