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

您可以使用 keydown 事件监听器来监听按键。您可以在 <input> 字段等上使用它。因为按键事件 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.");
    }
  });

});

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

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

并根据 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);
  }
}