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

【问题标题】：animate scroll to specific page position on scroll动画滚动到滚动上的特定页面位置
【发布时间】：2015-10-11 12:10:30
【问题描述】：

我正在尝试复制 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. 动画开始后终止任何进一步的滚动，以防止它跳过下一部分。

【问题讨论】：

虽然我非常推荐为此使用 jQuery，但您可以尝试在 this thread 的帮助下单独使用 JavaScript。

标签： javascript jquery scroll jquery-animate scrolltop

【解决方案1】：

对于其他可能想知道的人，这是我发现的一个插件，它的功能与我正在寻找的东西很接近，并且比我最初的尝试要顺畅得多。

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

【讨论】：