анимировать прокрутку до определенной позиции страницы в прокрутке

Question

Я пытаюсь реплицировать событие прокрутки, найденное на http://blkboxlabs.com/, когда пользователь прокручивает его, анимирует экран до следующего раздела полной высоты, в зависимости от того, прокручиваются ли они вверх или вниз.

У меня есть аналогичная функциональность, но она намного менее гладкая, и если пользователь достаточно прокручивает, он пропускает 2 раздела, а не останавливается в следующем разделе.

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; 
} 

Вы можете увидеть мой пример в https://jsfiddle.net/raner/vhn3oskt/2/

То, что я пытаюсь выполнить: 1. Запустите одушевленные scrollTop функция немедленно на свитке, только один раз. 2. Убейте любую дальнейшую прокрутку после начала анимации, чтобы она не пропустила следующий раздел.

Answer 1

Для кого-либо, кто может захотеть узнать, вот плагин, который я нашел, что сделал что-то близкое к тому, что я искал, и был намного более плавным, чем моя первоначальная попытка.

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