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

问题描述：

我的网页上有2个div。第一个div是“#pattern”（红色），第二个是“#projets”（蓝色）滚动时滚动到div，当div消失时滚动到顶部

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

现在我想滚动回页面的顶部（“#pattern”div），只要“#pattern”div再次出现滚动时，红色的一个。所以基本上它应该是尽快从我的div“#projets”屏幕的顶部偏移是supperior为1.

我已经尝试过很多解决方案没有结果，使用标志，多个条件...它可以是相同种类的这个页面上的事情，但用户应该abble页面内自由滚动，没有滚动的哈希散列：

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/

希望有人能帮助我，我不能找出我在做什么错，也许是一种错误的方法！感谢

答

看起来你需要跟踪的三件事：

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

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消失时滚动到顶部

相关推荐