website with slide waypoints.. offset problems...

[brhsdas]

I´m making a parallax website slide-kinded, using waypopints. I want to make it in such a way that as soon as I scroll (up or down) waypoint jumps to the following or previous corresponding viewport. The problem is that the down direction doesn't work properly with any offset... whereas the offset for the up direction works perfectly... Would you be so kind to help me please...?

the code goes as it follows: HTML

        <ul class="navigation">
            <li data-slide="1" class="active">...</li>
            <li data-slide="2">...</li>
            <li data-slide="3">...</li>
            <li data-slide="4">...</li>
            <li data-slide="5">...</li>
            <li data-slide="6">...</li>
    </ul>
        <div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
            ...
            <a class="button" data-slide="2" title=""></a>
        </div><!--End Slide 1-->
        <div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="1">
            ...
            <a class="button" data-slide="3" title=""></a>
        </div><!--End Slide 2-->
        <div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5">
            ...
            <a class="button" data-slide="4" title=""></a>
        </div><!--End Slide 3-->
        <div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0.5">
            ...    
            <a class="button" data-slide="5" title=""></a>
        </div><!--End Slide 4-->
        <div class="slide" id="slide5" data-slide="5" data-stellar-background-ratio="0.5">
            ...
            <a class="button" data-slide="6" title=""></a>
        </div><!--End Slide 5-->
        <div class="slide" id="slide6" data-slide="6" data-stellar-background-ratio="0.5">
            ...
        </div><!--End Slide 6-->

CSS

.slide {
    background-attachment: fixed;
    width:100%;
    height:100%;
    position: relative;
    box-shadow:inset 0px 10px 10px rgba(0,0,0,0.3);
    overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.slide .button{
    display:block;
    width:50px;
    height:50px;
    position:absolute;
    bottom:0px;
    left:50%;
    background-image:url(../../images/flexad.png);
    background-repeat:no-repeat;
}
.button:hover{ cursor:pointer; }
slide1 { background-image:url(....); }
slide2 { background-image:url(....); }
slide3 { background-image:url(....); }
slide4 { background-image:url(....); }
slide5 { background-image:url(....); }
slide6 { background-image:url(....); }

JQUERY

jQuery(document).ready(function ($) {

    //initialise Stellar.js
    //$(window).stellar({ responsive: true, });

    //Cache some variables
    var links = $('.navigation').find('li');
    var eject = 'true';
    slide = $('.slide');
    button = $('.button');
    mywindow = $(window);
    htmlbody = $('html,body');
    dataslide = 1;

    function goToByScroll(dataslide) {
        htmlbody.animate({
            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
        }, 2000, 'easeInOutQuint', function() { 
            eject = 'true';
        });
    }

//waypoints doesnt detect the first slide when user scrolls back up to the top so we add this little bit of code, that removes the class 
//from navigation link slide 2 and adds it to navigation link slide 1
    mywindow.scroll(function () {
        if (mywindow.scrollTop() === 0) {
            $('.navigation li[data-slide="1"]').addClass('active');
            $('.navigation li[data-slide="2"]').removeClass('active');
        }
    });

    links.click(function (e) {
        e.preventDefault();
        dataslide = parseFloat($(this).attr('data-slide'));
        eject = 'false';
        goToByScroll(dataslide);
    });

    button.click(function (e) {
        e.preventDefault();
        dataslide = parseFloat($(this).attr('data-slide'));
        eject = 'false';
        goToByScroll(dataslide);

    });

    slide.waypoint(function(event, direction) {
        if (direction === 'down'){
            if (dataslide !== 6 ){
                if (eject === 'true'){ dataslide = dataslide + 1; }
                $('.navigation li').removeClass('active');
                $('.navigation li[data-slide="' + dataslide + '"]').addClass('active');
            }
            if (eject === 'true') {
                eject = 'false';
                $.notify ('Estoy en waypoint down y lanzo el scroll '+dataslide);
                goToByScroll(dataslide);
            }
        }
    }, { offset: '100%' });

    slide.waypoint(function(event, direction) {
        if (direction === 'up'){
            if (dataslide !== 1 ){
                if (eject === 'true'){ dataslide = dataslide - 1; }
                $('.navigation li').removeClass('active');
                $('.navigation li[data-slide="' + dataslide + '"]').addClass('active');
            }
            if (eject === 'true') {
                eject = 'false';
                goToByScroll(dataslide);
            }
        }
    }, { offset: 15 });

    /* Mostar/ocultar las etiquetas en hover */
    $('.navigation li a').hover( 
        function () { $(this).prev('h1').show(); },
        function () { $(this).prev('h1').hide(); }
    );

});

You may see the website here