與jQuery一起使用箭頭鍵scrollTo

Question

我已成功實現scrollTo jQuery插件，當單擊鏈接時，該插件會滾動到類「new」的下一個div。不過，我也希望能夠使用箭頭鍵上下滾動到同一班級的下一個/上一個div。

我已經看過各地的互聯網，但一直無法找到如何做到這一點。我對JS很新，所以非常簡單的說明將不勝感激！

下面是相關代碼：

<script type="text/javascript"> 
jQuery(function($){ 

$('<div id="next_arrow"></div>') 
    .prependTo("body") //append the Next arrow div to the bottom of the document 
    .click(function(){ 
    scrollTop = $(window).scrollTop(); 
    $('.new').each(function(i, h2){ // loop through article headings 
    h2top = $(h2).offset().top; // get article heading top 
    if (scrollTop < h2top) { // compare if document is below heading 
    $.scrollTo(h2, 800); // scroll to in .8 of a second 
    return false; // exit function 
    } 
    }); 
    }); 

}); 
</script> 

什麼我需要添加到本作的方向鍵的作用？

感謝， 特德

Answer 1

可以使用​​事件偵聽器來偵聽按鍵的鍵碼哪。你可以在<input>等字段上使用。由於KEYDOWN事件bubble了DOM，你可以用它在document對象捕捉任何按鍵在頁面上：

$(function() { 
    $(document).keydown(function (evt) { 
    alert("Key pressed: " + evt.keyCode); 
    }); 
}); 

每個按鍵都有一個代碼。如果你在你的網頁使用上面的代碼，你會看到向下箭頭鍵碼是40.你可以獨唱這一點用在處理程序的if或switch聲明：

jQuery(function() { 

    $(document).keydown(function (evt) { 
    if (evt.keyCode == 40) { // down arrow 
     alert("You pressed down."); 
    } 
    }); 

}); 

現在你需要綁定到實際跳轉到下一個標題的代碼中。我建議將代碼抽象爲一個函數，以便您可以將它用於按鍵和點擊。下面是函數，用你的原代碼變體使用它一起：

// Here is the function: 

function scrollToNew() { 
    scrollTop = $(window).scrollTop(); 
    $('.new').each(function(i, h2){ // loop through article headings 
    h2top = $(h2).offset().top; // get article heading top 
    if (scrollTop < h2top) { // compare if document is below heading 
     $.scrollTo(h2, 800); // scroll to in .8 of a second 
     return false; // exit function 
    } 
    }); 
} 

// Here is your original code, modified to use the function: 

jQuery(function() { 

    $("#next").click(scrollToNew); 

}); 

最後，你可以在按鍵代碼從那裏添加和調用函數：

function scrollToNew() { 
    scrollTop = $(window).scrollTop(); 
    $('.new').each(function(i, h2){ // loop through article headings 
    h2top = $(h2).offset().top; // get article heading top 
    if (scrollTop < h2top) { // compare if document is below heading 
     $.scrollTo(h2, 800); // scroll to in .8 of a second 
     return false; // exit function 
    } 
    }); 
} 

jQuery(function() { 

    $("#next").click(scrollToNew); 

    $(document).keydown(function (evt) { 
    if (evt.keyCode == 40) { // down arrow 
     evt.preventDefault(); // prevents the usual scrolling behaviour 
     scrollToNew(); // scroll to the next new heading instead 
    } 
    }); 

}); 

更新：向上滾動，做兩件事。更改​​處理程序：

$(document).keydown(function (evt) { 
    if (evt.keyCode == 40) { // down arrow 
     evt.preventDefault(); // prevents the usual scrolling behaviour 
     scrollToNew(); // scroll to the next new heading instead 
    } else if (evt.keyCode == 38) { // up arrow 
     evt.preventDefault(); 
     scrollToLast(); 
    } 
    } 

和編寫基於斷scrollToNew()一個scrollToLast()功能找到的最後一個新的標題，是不是在頁面上：

function scrollToLast() { 
    scrollTop = $(window).scrollTop(); 

    var scrollToThis = null; 

    // Find the last element with class 'new' that isn't on-screen: 
    $('.new').each(function(i, h2) { 
    h2top = $(h2).offset().top; 
    if (scrollTop > h2top) { 
     // This one's not on-screen - make a note and keep going: 
     scrollToThis = h2; 
    } else { 
     // This one's on-screen - the last one is the one we want: 
     return false; 
    } 
    }); 

    // If we found an element in the loop above, scroll to it: 
    if(scrollToThis != null) { 
    $.scrollTo(scrollToThis, 800); 
    } 
} 

Answer 2

您需要捕獲的按鍵事件，並決定按下

$(document).keypress(function(e) { 
    switch(e.keyCode) { 
     case 37: 
      //left arrow pressed 
     break; 
     case 39: 
      //right arrow pressed 
     break; 
    } 
}); 

Answer 3

只是爲了讓更多的想法，工作與數組。

var panel_arr = new Array(); 
$(document).ready(function(e) { 

    $('.parallax-panel-wrapper').each(function(i, element){ 
     panel_arr.push($(this).attr("id")); 
    }); 

    var current_parallax_panel_no = 0; 
    $(document).keydown(function (evt) { 
     if (evt.keyCode == 40) { // down arrow 
      evt.preventDefault(); // prevents the usual scrolling behaviour 
      if(current_parallax_panel_no < (panel_arr.length-1)) current_parallax_panel_no++; 
      scrollByArrowKeys(1);    
     } else if (evt.keyCode == 38) { // up arrow 
      evt.preventDefault(); // prevents the usual scrolling behaviour 
      if(current_parallax_panel_no >= 1) current_parallax_panel_no--; 
      scrollByArrowKeys(0); 
     } 
    }); 

    function scrollByArrowKeys(add_more){ 
     scrollToThis = (($("#" + panel_arr[current_parallax_panel_no]).offset().top) + add_more ; // get element top 
     $.scrollTo(scrollToThis, 800);  
    } 

});