Question

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

当第一次使用滚动时，窗口自动滚动到第二个div“#projets”。我正在使用jquery scroll-To插件。它工作得很好，即使当用户滚动大量滚动时，也可能偏离“#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件事情：

滚动方向发生。
您当前正在查看的区域。
如果当前正在进行滚动动画（我们需要等到它完成，否则会出现问题）。

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。

滚动时滚动到div，当div消失时滚动到顶部

1 个答案: