將動畫滾動到滾動上的特定頁面位置

我試圖複製在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