Question

我在网页上有2个div。第一个div是#pattern，另一个div是#top。

当用户到达我的网页时，这两个div是可见的。一旦用户开始滚动，我想要＆＃34;＃top＆＃34; div滚动到顶部。我设法实现了这一点，但是一旦完成，我希望用户能够再次开始滚动，我只希望当用户第一次滚动时滚动动画出现一次。

我正在使用jquery.scrollTo插件。

我尝试使用旗帜，但它没有工作......

这是我的HTML：

<div id="pattern">
</div>

<div id="top">
</div>

我的css：

#pattern {
    height: 600px; 
    width:100%;
    background-color:blue
}

#top {
    height: 600px;
    width:100%;
    background-color:red;
}

和我的Jquery：

$(window).on('scroll',function(){    
    var flag=0 ;

    if((flag==0) && $(window).scrollTop()>10){ 
        $(window).scrollTo('#top', 800);
        flag=1;
    }    
});

这是JSfiddle：http://jsfiddle.net/w8mgnmfe/

Answer 1

滚动时只需转动事件off：

$(window).on('scroll.mynamespace',function(){

    if($(window).scrollTop() > 10) {
        $(window).off('scroll.mynamespace');
        $('html,body').animate({scrollTop: $('#top').offset().top});
    }

});

注意：我已将其更新为不使用插件。同时将mynamespace更改为更有意义的内容，例如scrollToDiv或任何对您有意义的内容。这可以确保您只关闭该事件。

如果您想重新激活它：

var autoScrolled = false;
var scrollBoundary = 10;

$(window).on('scroll.mynamespace',function() {

    var windowTop = $(window).scrollTop();

    if (!autoScrolled && windowTop > scrollBoundary) {
        autoScrolled = true;
        $('html,body').animate({scrollTop: $('#top').offset().top});
    } else if(autoScrolled && windowTop <= scrollBoundary) {
         autoScrolled = false;
    }

});

小提琴：http://jsfiddle.net/ferahl/b5ybs6xg/1/

Answer 2

我设法通过将标志放在滚动事件之外来找到解决方案......

这是完整的代码：

var flag=0 ;

$(window).on('scroll',function(){    


    if((flag==0) && $(window).scrollTop()>10){ 
        $(window).scrollTo('#top', 800);
        flag=1;
    }    

        if($(window).scrollTop()==0){ 
        flag=0;
    }   
});

用户开始滚动时滚动一个div，然后让用户自由滚动

2 个答案: