Javascript 滚动时滚动到一个div，当div消失时滚动到top

我的网页上有两个div。第一个分区是“模式”（红色），第二个分区是“项目”（蓝色）

第一次使用scrolls时，窗口会自动滚动到第二个div“#projets”。我正在使用jquery滚动到插件。 它工作得很好，即使当用户滚动大量的滚动时，可能会出现从“#projets”分区偏移的情况。。。如果有人有一个想法来纠正这将是很好的，但这不是我的主要问题

现在，当滚动时，只要“#pattern”div再次出现，我就尝试滚动回页面顶部（“#pattern”div），红色的那个。因此，基本上应该是在我的div“#projets”屏幕顶部的偏移量大于1时

我尝试了很多解决方案，但都没有结果，使用了标志和多种条件。。。它可以与此页面上的内容相同，但用户应该能够在页面内自由滚动，而不是从一个散列滚动到另一个散列：

这是我的html：

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

还有我的jquery：

var flag=0 ;

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

var top_projets_position = $("#projets").offset().top - $(window).scrollTop();

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

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

});

以下是JSFIDLE：

---

希望有人能帮我，我不知道我做错了什么，也许是一个错误的方法！谢谢

看起来您需要跟踪3件事情：

此时会出现滚动方向

您当前正在查看的区域

如果当前正在进行滚动动画（我们需要等待，直到它完成，否则将出现问题）

var-prev\u scroll=0//
var flag=0 ;

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

var top_projets_position = $("#projets").offset().top - $(window).scrollTop();

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

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

});

var prev_scroll = 0;           // <-- to determine direction of scrolling
var current_view ="#pattern";  // <-- to determine what element we are viewing
var allowed = true;            // <-- to prevent scrolling confusion during animation

var top_projets_position = $("#projets").offset().top + 1;

$(window).on('scroll',function(){ 
    var current_scroll = $(window).scrollTop();

    if(current_scroll < top_projets_position && current_view=="#projets" && current_scroll < prev_scroll){
        scrollToTarget("#pattern");
    }
    if($(window).height() + current_scroll > top_projets_position && current_view=="#pattern" && current_scroll > prev_scroll){
         scrollToTarget("#projets");
    }

    prev_scroll = current_scroll;
});

function scrollToTarget(selector){
    if(allowed){
        allowed = false;
        $(window).scrollTo(selector, {
            'duration':500, 
            'onAfter': function(){ allowed = true;  current_view = selector;}
        });
    }
}