How do I map up and down-arrow keys to page-up and page-down keys

Question

I pieced together this block of code to advance the user further left/right than normally. It works well and I'd like the same for up/down. If someone is in the know, I'd be grateful for a reply! Thanks all.

$(document).keydown(function(e) {
  if (e.keyCode == 37) {
    var leftPos = $('.jcarousel').scrollLeft();
    $(".jcarousel").animate({
      scrollLeft: leftPos - 800
    }, 800);
    return false;
  }
  if (e.keyCode == 39) {
    var leftPos = $('.jcarousel').scrollLeft();
    $(".jcarousel").animate({
      scrollLeft: leftPos + 800
    }, 800);
    return false;
  }
  if (e.keyCode == 40) {
    var topPos = $('.wrapper').scrollTop();
    // DO SOMETHING, BUT WHAT?
    return false;
  }
  if (e.keyCode == 38) {
    // DO SOMETHING, BUT WHAT?
    return false;
  }
});

Take a look at this thread: http://stackoverflow.com/questions/832059/definitive-way-to-trigger-keypress-events-with-jquery. You can use that to trigger a simulated `keydown` event on the `Page Up` key whenever someone presses the up arrow. Combine that with `e.preventDefault()` to stop the natural up arrow functionality from occurring at the same time. — jmcgriz, Mar 03 '16 at 20:42

score 0 · Accepted Answer · answered Mar 05 '16 at 20:57

So here's the final chunk that does as it's supposed to. (figured it out...)

<script>
$(document).keydown(function(e){
    if (e.keyCode == 37) { 
         var leftPos = $('.jcarousel').scrollLeft();
         $(".jcarousel").animate({scrollLeft: leftPos - 1200}, 800);
       return false;
    }
     if (e.keyCode == 39) { 
         var leftPos = $('.jcarousel').scrollLeft();
         $(".jcarousel").animate({scrollLeft: leftPos + 1200}, 800);
       return false;
    }
     if (e.keyCode == 40) { //Down
         var topPos = $(window).scrollTop();
     $(window).animate({scrollTop: topPos + 800}, 600);
             $(".jcarousel").animate({scrollLeft: 0}, 800);

       return false;
    }
     if (e.keyCode == 38) { //Up

 var topPos = $(window).scrollTop();
     $(window).animate({scrollTop: topPos - 800}, 600);
             $(".jcarousel").animate({scrollLeft: 0}, 800);

       return false;
    }
});
</script>

How do I map up and down-arrow keys to page-up and page-down keys

1 Answers1