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

});