scrollTo next/prev anchor using arrow keys or button?

Question

I've been googling for a week now and I just don't understand how to combine it all :(

I'm making a horizontal website similar to this, except I want to be able to navigate using arrow keys to move back and forth between sections of the horizontal page similar to this.

The relevant research I've found the following pages:

The best I've been able to come up with is this but its not working:

$(document).bind('keydown',function(evt) {
        switch(evt.keyCode) {
        case 37:
              evt.preventDefault(); 
              $.scrollTo('+=564px', 800, { axis:'x' }); 
                    break;
                }
});


$(document).bind('keydown',function(evt) {
        switch(evt.keyCode) {
                    case 39:
              evt.preventDefault();
              $.scrollTo('-=564px', 800, { axis:'x' });
                    break;
                }
});

Isn't there just a way to create anchors or div classes that can be scrolled to on using the arrow keys or clicking arrow buttons? I'm pretty lost here. Maybe I'm asking too much, but if someone could point me in the right direction I'd be grateful, thanks :)

Why can you not post your code? It would really help to see what you already have. — Rory McCrossan, Dec 07 '11 at 08:51
thanks for the replies, updated with my code and reading through the replies now... — Jenny Westburg, Dec 07 '11 at 22:02

score 1 · Answer 1 · answered Dec 07 '11 at 09:06

$('document').keypress(function(e) {
   if (e.which == 38) {
       //scroll up
   } else if (e.which == 39) {
       //scroll right
   } else if (e.which == 40) {
       //scroll down
   } else if (e.which == 37) {
       //scroll left
   }   
});

Use .animate() to do the scrolling effect, and use e.preventDefault(); to prevent the default movement of the keys in each of those if blocks.

score 0 · Answer 2 · answered Dec 07 '11 at 08:53

The following code will detect the left/right arrow keypresses:

$("body").keydown(function(e) {
    if (e.which == 37) { 
        // left arrow pressed
    }
    else if (e.which == 39) { 
        // right arrow pressed
    }
});

You'll just need to add your slide logic for each condition.

scrollTo next/prev anchor using arrow keys or button?

2 Answers2