用滾動條的一次移動來改變屏幕的位置

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

希望這是你所期待的。