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

Question

Before too I wanted to apologize for the title of the question, I could not find a better way to explain. What I want is a 'normal' page, which has for example: 5 sections, I wanted in the scroll we did not see half of one and half of another, ie at the end of the event mousewhell or scroll 'manual', the page was emediatamente to the next or previous element (depending on the direction, up or down) but never between the two. my case in 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(){
    ....
});