title: Using arrow keys with jQuery scrollTo
body: <p>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.</p>
  
  <p>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!</p>
  
  <p>Here is the relevant code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery(function($){
  
   $('&lt;div id="next_arrow"&gt;&lt;/div&gt;') 
    .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 &lt; h2top) { // compare if document is below heading
       $.scrollTo(h2, 800); // scroll to in .8 of a second
       return false; // exit function
      }
     });
    });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>What do I need to add to this to make the arrow keys work?</p>
  
  <p>Thanks,
  Ted</p>