用滚动条的一次移动来改变屏幕的位置

Question

HelloI制作了两个div，每个的高度覆盖了空白页。这两个div位于对方的下方。我想在用户放下滚动条时鼠标将页面直接转到第二个div的开始位置并且当提升滚动条时，页面会直接进入第一个div的开头。请帮助我了解如何对此进行操作 非常感谢。

#up_page{ 
 
width:100%; 
 
height:50%; 
 
background-color:red; 
 
} 
 
#down_page{ 
 
width:100%; 
 
height:50%; 
 
background-color:blue; 
 
}

<div style="width: 100%; height: 1500px;"> 
 
\t \t <div id="up_page"> \t 
 
\t \t </div> 
 
\t \t <div id="down_page"> \t 
 
\t \t </div> 
 
\t </div>

Answer 1

发现了另一个线程，它有同样的问题你。

Stackoverflow

 var winH = $(window).height(); 
     $('.page').height(winH); 

     var c = 0; 
     var pagesN = $('.page').length; 
     var canScroll = true; 

     $(document).bind('mousewheel', function(ev, delta) { 
     ev.preventDefault(); 
     if(!canScroll) return; 
     delta>0 ? --c : ++c ;  
     if(c===-1){ 
     c=0; 
     }else if(c===pagesN){ 
      c=pagesN-1; 
     } 
     canScroll = false; 
      var pagePos = $('.page').eq(c).position().top;  
      $('html, body').stop().animate({scrollTop: pagePos},700,  

     function(){ 
     canScroll = true; 
     }); 
     return false; 

     }); 

这里是它会怎样看一些jQuery的一个例子：

工作jsfiddle

希望这是你所期待的。