javascript - 滚动时滚动到div，div消失时滚动到顶部

Question

我的网页上有 2 个 div。第一个 div 是“#pattern”(红色)，第二个是“#projets”。(蓝色)

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

现在我试图在滚动时“#pattern”div 重新出现时立即滚动回页面顶部(“#pattern”div)，即红色的。所以基本上，只要我的 div“#projets”距屏幕顶部的偏移量大于 1，它就应该是这样。

我已经尝试了很多没有结果的解决方案，使用标志，多个条件...它可能与此页面上的情况相同，但用户应该能够在页面内自由滚动，而不是从哈希滚动哈希:

http://www.thepetedesign.com/demos/onepage_scroll_demo.html

这是我的 html :

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

我的CSS:

#pattern {
    height:300px;
    width: 100%;
    background-color:red
}

#projets {
    height:800px;
    width: 100%;
    background-color:blue
}

和我的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;
    }   

});

这是 jsfiddle :

http://jsfiddle.net/jdf9q0sv/

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

Answer 1

看起来您需要跟踪 3 件事:

1. 发生滚动方向。
2. 您当前正在查看的区域。
3. 如果当前正在发生滚动动画(我们需要等到它完成，否则会出现问题)。

http://jsfiddle.net/vx69t5Lt/

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

这只是基于您的原始代码的快速解决方案。更好的解决方案是做更多面向对象(OOP)的事情并跟踪对象中的值。也许在创建对象时采用一个元素数组，捕获所有边界并使用滚动处理程序中的边界来确定何时滚动到下一个 div。