jQuery的向下滾動的部分與頁面高度向下鍵

Question

我試圖讓jQuery的滾動只是部分的高度下降（這是響應），當用戶按下向下翻頁：

<section class="intro viewportheight_min" id="intro"> 
... 
</section> 
<section id="page2"> 
... 
</section> 
<section c id="page3"> 
... 
</section> 

CSS的全高部分：

body, html, .container, section { 
    height: 100%; 
    margin:0; 
} 

這裏是JS：

var ar=new Array(33,34,35,36,37,38,39,40); 
$(document).keydown(function(e) { 
    var key = e.which; 
//  PgUp(33), PgDn(34), End(35), Home(36), Left(37), Up(38), Right(39), Down(40) 
     if(key==33) { 
     $(document).scrollTop($(document).scrollTop() - $(window).height()); 
     } 
     if(key==34) { 
     $(document).scrollTop($(document).scrollTop() + $(window).height()); 
     } 

     return true; 
}); 

但是，這並不正常工作，它會在近t最後一部分的底部。

Answer 1

使用此邏輯適應您的代碼。即使不具有相同高度，也適用於所有元素

var positionMap = {}; 

$('section').each(function(){ 
    var $this = $(this); 
    positionMap.push({ height: $this.outerHeight(true), position: $this.offset() }); 
} 

$(document).keydown(function(e) { 
    var key = e.which; 

    //the current scroll position 
    var currentPos = $('body').scrollTop(); 

     if(key==33) { 
     //Find next section position 
     for (var i=0; i<positionMap.length; i++) 
     { 
      var e = positionMap[i]; 
      //found the pre 
      if (e.position.top > currentPos){ 
       destination = e.position.top; 
       break; 
      } 
     } 
     } 
     else if(key==34) { 
     //Find previous section position 
     for (var i=0; i<positionMap.length; i++) 
     { 
      var e = positionMap[i]; 
      //found the pre 
      if (e.position.top + e.height >= currentPos){ 
       destination = e.position.top; 
       break; 
      } 
     } 
     } 

     $('body').scrollTop(destination); 

     return true; 
}); 

Answer 2

未經測試，但你可以嘗試並適應類似：

$(document).keydown(function(e) { 
    var key = e.which; 

     //Find first visible section 
     $el = $('section').filter(':visible').first(); 

     if(key==33) { 
     //Find next section position 
     var offset = $el.next().offset(); 
     $(document).scrollTop(offset.top); 
     } 
     if(key==34) { 
     //Find previous section position 
     var offset = $el.prev().offset(); 
     $(document).scrollTop(offset.top); 
     } 

     return true; 
}); 

此外，我認爲33和34是在正確的鍵碼FR上下翻頁。