如何在js中的多个ID上滚动页面

Question

请检查我还没有做什么http://jsfiddle.net/dUVmh/1/ 。

关于我要实现的动画是：

首次向下滚动页面时，窗口滚动到#green DIV。 之后，如果您再次向下滚动窗口，则滚动到#yellow DIV并在向上滚动时将其相同（从#yellow到#green）。

关于此问题：您可以看到动画粘贴在#green DIV上。

$(window).scroll(function(){
    if($(this).scrollTop() > 0) {
        $("html, body").animate({ scrollTop: $('#green').offset().top }, 1000);
    }
    else if($(this).scrollTop() > 1000) {
        $("html, body").animate({ scrollTop: $('#yellow').offset().top }, 1000);
    }
    else{
         $("html, body").animate({ scrollTop: $('#red').offset().top }, 1000);
    }

});

我在JS方面没有太多经验。

谢谢我提前:)

Answer 1

这是一个很有趣的问题。

此解决方案将div放置到数组中，并记住最后滚动到的元素的数组索引。 触发滚动事件后，它会检查新的scrollTop是否在当前div顶部偏移之上或之下，并相应地移动到数组中的下一个或上一个div。

该解决方案使您可以拥有许多股利。 我试图消除快速滚动时出现的闪烁，但是我认为唯一的方法是在动画播放期间禁用滚动条。

http://jsfiddle.net/dUVmh/35/

$(function() {
    var divs = [],
        body = $('body, html'),
        currentDiv = 0,
        timeout;

    $('div').each(function() {
        divs.push($(this));
    });

    // we only need to capture the first scroll event triggered and then
    // add another listener once we have done our animation
    var scrollListen = function() {
        $(window).one('scroll', function() {
            doScroll($(this).scrollTop());
        });
    };

    // Without the timeout, the scroll event would be triggered again too soon
    var scrollEnd = function() {
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            scrollListen();
        }, 10);
    };

    // checks if the scroll direction was up and down and animates
    // the body scrollTop to the next or previous div
    var doScroll = function(scrollTop) {
        var direction = scrollTop - divs[currentDiv].offset().top;

        if (direction > 0 && currentDiv + 1 < divs.length) {
            nextDiv = currentDiv + 1;
        } else if (currentDiv - 1 > -1) {
            nextDiv = currentDiv - 1;
        }

        if (currentDiv === nextDiv) {
            scrollEnd();
        }

        body.animate({
            scrollTop: divs[nextDiv].offset().top
        }, 1000, function() {
            currentDiv = nextDiv;
            scrollEnd();
        });
    };

    scrollListen();
});

编辑 ：Firefox scrollTop需要在html而不是正文上进行更改。 还解决了firefox一次多次调用scrollListen的问题。

Answer 2

问题是，当使用jQuery滚动ScrollTop动画时，会反复调用$(window).scroll(function()) 。

这是一个可能的解决方案，它检查当前是否正在滚动并且仅执行一次ScrollTop动画。

http://jsfiddle.net/dUVmh/29/

旁注：检查用户向哪个方向滚动（向上或向下），并取决于滚动到顶部还是向下的下一个div，这可能是一个好主意。
您可以检查是否保存了最后一个scrollTop位置，并将其与当前位置进行比较。

更新：这是一个考虑滚动方向的解决方案： http : //jsfiddle.net/dUVmh/36/