Javascript 在 jQuery scrollTo 中使用箭头键

Using arrow keys with jQuery scrollTo

提问by Ted

I have successfully implemented the scrollTo jQuery plugin which scrolls to the next div with the class "new" when a link is clicked. However, I would also like to be able to use the arrow keys to scroll up and down to the next/previous divs of the same class.

我已经成功实现了 scrollTo jQuery 插件，该插件在单击链接时滚动到下一个带有“new”类的 div。但是，我还希望能够使用箭头键上下滚动到同一类的下一个/上一个 div。

I have looked all over the internet but have been unable to find out how to do this. I am very new to JS so very simple instructions would be appreciated!

我已经浏览了整个互联网，但一直无法找到如何做到这一点。我对 JS 很陌生，所以非常简单的说明将不胜感激！

Here is the relevant code:

这是相关的代码：

<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>

What do I need to add to this to make the arrow keys work?

我需要添加什么才能使箭头键工作？

Thanks, Ted

谢谢，泰德

回答by davegurnell

You can use the keydownevent listener to listen for keypresses. You can use this on <input>fields and the like. Because keydown events bubbleup the DOM, you can use it on the documentobject to catch any keypress on the page:

您可以使用keydown事件侦听器来侦听按键。您可以在<input>字段等上使用它。因为 keydown 事件会在 DOM 中冒泡，所以您可以在document对象上使用它来捕获页面上的任何按键：

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

Each keypress has a code. If you use the code above in your web page, you'll see that the key code for the down arrow is 40. You can solo this out using an ifor switchstatement in the handler:

每个按键都有一个代码。如果您在网页中使用上面的代码，您将看到向下箭头的关键代码是 40。您可以在处理程序中使用iforswitch语句将其单独显示：

jQuery(function () {

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

});

Now you need to bind in the code that actually jumps to the next heading. I recommend abstracting the code out into a function so you can use it for both keypresses and clicks. Here is the function, together with a variant of your original code that uses it:

现在您需要绑定实际跳转到下一个标题的代码。我建议将代码抽象为一个函数，以便您可以将其用于按键和点击。这是该函数以及使用它的原始代码的变体：

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

});

Finally, you can add in the keypress code and call the function from there:

最后，您可以添加按键代码并从那里调用该函数：

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

});

Update:To scroll upwards, do two things. Change the keydownhandler to:

更新：要向上滚动，请做两件事。将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();
    }
  }

and write a scrollToLast()function based off of scrollToNew()that finds the last new heading that isn't on the page:

并编写一个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);
  }
}

回答by user1418777

Just for giving more idea, working with arrays.

只是为了提供更多想法，使用数组。

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

});

回答by PetersenDidIt

You need to capture the keypress event and decide which keycode was pressed

您需要捕获按键事件并确定按下了哪个键码

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