animate scroll to specific page position on scroll

Question

I'm trying to replicate the scroll event found on http://blkboxlabs.com/, when the user scrolls it animates the screen to the next full height section, depending on if they scroll up or down.

I've got similar functionality, but it is much less smooth, and if the user scrolls enough it will skip 2 sections, as opposed to stopping at the next section.

var didScroll;
var lastScrollTop = 0;
var delta = 5;


$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 800);

function hasScrolled() {
    var st = $(document).scrollTop();
    var winTop = $(window).scrollTop();
    var winBottom = winTop + ($(window).height());

    // Make sure they scroll more than delta
    /*if(Math.abs(lastScrollTop - st) <= delta)
        return;*/

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop){
        // Scroll Down
        $('.fullHeightScrollAssist').each(function(index, element) {
            var elTop = $(this).offset().top;
            var elBottom = elTop + $(this).outerHeight();
            if(elTop > winTop && elTop < winBottom){
                $('.fullHeightScrollAssist').removeClass('activeFullScreen');
                $(this).addClass('activeFullScreen');
                $('html,body').animate({scrollTop: elTop}, 700);    
            };
        });
    } else {
        // Scroll Up
            $('.fullHeightScrollAssist').each(function(index, element) {
                var elTop = $(this).offset().top;
                var elBottom = elTop + $(this).outerHeight();
                if(elBottom > winTop && elTop < winTop){
                    $('.fullHeightScrollAssist').removeClass('activeFullScreen');
                    $(this).addClass('activeFullScreen');
                    $('html,body').animate({scrollTop: elTop}, 700);    
                };
            });
    }

    lastScrollTop = st;
}

You can see my example at https://jsfiddle.net/raner/vhn3oskt/2/

What I'm trying to accomplish: 1. run the animate scrollTop function immediately on scroll, only once. 2. kill any further scrolling once animation starts, to keep it from skipping the next section.

While I'd very much recommend using jQuery for this, you can try doing it in JavaScript alone with the help of **[this thread](http://stackoverflow.com/questions/21474678/scrolltop-animation-without-jquery)**. — FWDekker, Jul 21 '15 at 20:58

score 0 · Answer 1 · answered Jul 23 '15 at 22:59

For anyone else who might like to know, here's a plugin I found that did something close to what I was looking for and was a lot smoother than my initial attempt.

http://www.jqueryscript.net/demo/jQuery-Plugin-For-Smooth-Scroll-Snapping-panelSnap/demos/

animate scroll to specific page position on scroll

1 Answers1