Question

关于我想要实现的动画是：

首次向下滚动页面时，窗口会滚动到 #green DIV。之后如果再次向下滚动窗口滚动到 #yellow DIV＆amp;同时在scrollup（fom #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。

此解决方案允许您拥有许多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();
});

编辑：需要在html而不是正文上更改Firefox scrollTop。同时修复了firefox多次调用scrollListen的问题。

Answer 2

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

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

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

旁注：最好检查用户向哪个方向滚动（向上或向下），并根据滚动到下一个div到顶部或向下滚动。
您可以检查是保存最后一个scrollTop位置并将其与当前位置进行比较。

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

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

2 个答案: