Utilisation des touches fléchées avec jQuery scrollTo

Question

J'ai implémenté avec succès le plugin scrollTo jQuery qui défile vers la div suivante avec la classe "new" quand on clique sur un lien. Cependant, j'aimerais aussi pouvoir utiliser les touches fléchées pour faire défiler les divs suivant/précédent de la même classe.

J'ai regardé partout sur Internet mais j'ai été incapable de trouver comment faire ceci. Je suis très nouveau à JS donc des instructions très simples seraient appréciées!

Voici le code correspondant:

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

Que dois-je ajouter à cela pour faire les touches fléchées fonctionnent?

Merci, Ted

Answer 1

Vous pouvez utiliser l'écouteur d'événement keydown pour écouter les pressions sur les touches. Vous pouvez l'utiliser sur les champs <input> et autres. Parce que les événements keydown bubble le DOM, vous pouvez l'utiliser sur l'objet document pour attraper toute pression de touche sur la page:

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

Chaque pression de touche a un code. Si vous utilisez le code ci-dessus dans votre page Web, vous verrez que le code clé pour la flèche vers le bas est 40. Vous pouvez en solo ce à l'aide d'une déclaration if ou switch dans le gestionnaire:

jQuery(function() { 

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

}); 

Maintenant, vous besoin de lier dans le code qui saute effectivement à l'en-tête suivant. Je recommande d'extraire le code dans une fonction afin que vous puissiez l'utiliser à la fois pour les pressions de touche et les clics. Voici la fonction, avec une variante de votre code d'origine qui l'utilise:

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

}); 

Enfin, vous pouvez ajouter dans le code keypress et appeler la fonction à partir de là:

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

}); 

Mise à jour: Pour faire défiler vers le haut, faites deux choses. Changer le gestionnaire 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(); 
    } 
    } 

et écrire une fonction scrollToLast() basée hors de scrollToNew() qui trouve la dernière nouvelle rubrique qui ne sont pas sur la page:

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

Vous devez capturer l'événement keypress et décider keycode a été pressé

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

Answer 3

Juste pour donner plus d'idée, travailler avec des tableaux.

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

});