将动画滚动到滚动上的特定页面位置

我试图复制在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.一旦动画开始，就会停止进一步滚动，以避免跳过下一部分。

来源

2015-07-21 Cory Dobson

而我呢，非常推荐使用jQuery这一点，你可以尝试在JavaScript中使用** [此线索]的帮助（http://stackoverflow.com/questions/21474678单独做/ scrollTop的动画，而无需-jquery的）**。 – FWDekker