scrollTop a 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;
    }

});

Fiddle: 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;
    }   
});

scrollTop a div 当用户开始滚动时，然后让用户自由滚动

scrollTop a div when user starts scrolling, and then let users free to scroll

jquery

scrollto

scrolltop