scroll在用户开始滚动时使div处于顶部，然后让用户自由滚动

Question

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

[当用户到达我的网页时，两个div可见。用户开始滚动后，我希望“ #top” div滚动到顶部。我设法实现了这一点，但是一旦完成，我希望用户能够开始重新滚动，而我只是希望当用户第一次滚动时，scrollto动画只出现一次。

我正在使用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;
    }   
});

Answer 3

这是Brian。有没有人发现发生了什么滚动到顶部点