Using arrow keys with jQuery scrollTo?

You can use the keydown event listener to listen for keypresses. You can use this on input fields and the like. Because keydown events bubble up the DOM, you can use it on the document object to catch any keypress on the page.

Up vote 2 down vote favorite share g+ share fb share tw.

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. 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! Here is the relevant code: What do I need to add to this to make the arrow keys work? Thanks, Ted javascript jquery html scrollto arrow-keys link|improve this question asked Jan 30 '10 at 17:34Ted80125.

You can use the keydown event listener to listen for keypresses. You can use this on fields and the like. Because keydown events bubble up the DOM, you can use it on the document object to catch any keypress on the page: $(function () { $(document).

Keydown(function (evt) { alert("Key pressed: " + evt. KeyCode); }); }); Each keypress has a code. If you use the code above in your web page, you'll see that the key code for the down arrow is 40.

You can solo this out using an if or switch statement in the handler: jQuery(function () { $(document). Keydown(function (evt) { if (evt. KeyCode == 40) { // down arrow alert("You pressed down.

"); } }); }); Now you need to bind in the code that actually jumps to the next heading. I recommend abstracting the code out into a function so you can use it for both keypresses and clicks. Here is the function, together with a variant of your original code that uses it: // 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) { // 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); } }.

Thank you very much, this works! What would I have to add to be able to use the arrow keys up? – Ted Jan 30 '10 at 18:41 Edited in above... – Dave G Jan 31 '10 at 9:10 Thank you very much!

Works perfectly. – Ted Jan 31 '10 at 13:52.

You need to capture the keypress event and decide which keycode was pressed $(document). Keypress(function(e) { switch(e. KeyCode) { case 37: //left arrow pressed break; case 39: //right arrow pressed break; } }).

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.