在jQuery scrollTo中使用箭頭鍵

Question

我已經成功實現了scrollTo jQuery插件，當單擊鏈接時，該插件會滾動到具有“新”類的下一個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

您可以使用keydown事件偵聽器來偵聽按鍵。 您可以在<input> 領域之類的。 由於keydown事件使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
    }
  });

});

更新：要向上滾動，請做兩件事。 將keydown處理程序更改為：

  $(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();
    }
  }

寫一個scrollToLast()的基於關閉功能scrollToNew()即發現上一個新的標題，是不是在頁面上：

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

只是為了給更多的想法，使用數組。

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);      
    }

});

Answer 3

您需要捕獲按鍵事件並確定按下了哪個按鍵代碼

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