Question

我知道这个主题已经被覆盖但是我没有找到与我的问题一样具体的内容，而且我发现的解决方案对我来说并不起作用（或者我无法成功实现它工作）。我基本上想要滚动到下一个元素的顶部（100％高度元素），如果我向下滚动，如果我从该元素向上滚动，我希望它滚动回到页面顶部。

我目前有这个：

var currDiv = 1;

$(window).scroll(function(event)
{

if (currDiv == 1)
{

    $('html, body').animate({  
        scrollTop:$('div.container').offset().top 
    }, 'slow');  

    currDiv = 2;

}

else if (currDiv == 2)
{

    $('html, body').animate({  
        scrollTop:$('div.albums').offset().top 
    }, 'slow'); 

    currDiv = 1; 

}

});

我知道它没有＆＃34; up＆＃34; ＆＃34; down＆＃34;事件还没有，并且它在不同层面上是错误的，但它是第一次尝试在它们之间循环......问题是它触发了它自己并且它在两个元素之间循环回来......任何帮助都将非常感激。

http://jsfiddle.net/644eghbw/1/这是一个证明问题的小人物

Answer 1

您在滚动事件上设置了滚动位置的动画。动画滚动位置会触发滚动事件，从而创建无限循环。

您需要确保在当前正在运行时不创建另一个滚动动画。您可以使用变量和动画回调来设置它。这是一个展示基本概念的less-than-perfect example。

var currDiv = 1;
var scrolling = false;

$(window).scroll(function(event)
{
    if (!scrolling)
    {
        if (currDiv == 1)
        {
            $('html, body').animate({  
                scrollTop:$('.one').offset().top 
            }, 'slow', function() {
                setTimeout(function() {
                    scrolling = false;
                }, 1000);
            });
            scrolling = true;
            currDiv = 2;
        }
        else if (currDiv == 2)
        {
            $('html, body').animate({  
                scrollTop:$('.two').offset().top 
            }, 'slow', function() {
                setTimeout(function() {
                    scrolling = false;
                }, 1000);
            });
            scrolling = true;
            currDiv = 1; 
        }
    }
});

scrollTop（）函数无限循环

1 个答案: