How can one smooth scroll up and down between objects on a page with arrow keys?

Question

I am building a very simple website with a series of images arranged vertically on a page. I would like to be able to use the up and down arrow keys to smooth scroll from one image to the next, up or down. This way the number of keystrokes required for browsing will be minimized and the unmatched spacing of page down and page up can be avoided.

I imagine that this is going to be a javascript function. However, I am not very experienced using javascript, so I hope you can consider a beginner in the answer. Right now, the images are arranged inside a single div and separated with br (multiple line breaks). So, I imagine it might be possible to place an id in each img or to place identifying tags around each img for the javascript to use. Or, perhaps, there is another way to make the javascript recognize the steps for scrolling via arrow keys. What is the best way to do this? Thank you.

Answer 1

This is a fun and easy one if you know jQuery. Catch the up/down arrow key presses and prevent their default scroll action. Then find the next or previous image based on the arrow press. Finally use jQuery's animate to bring the top of the element into view. You'll need to put in some error checking for when you go past the end of the list, but I am sure you can figure it out based on this.

http://jsfiddle.net/aVvQF/4/

$(window).keydown(function(e) {
    e.preventDefault(); //prevent default arrow key behavior

    var targetElement;
    //down
    if (e.keyCode == 40) {
        $targetElement = $('.active').next('img');
    }
    //up
    else if (e.keyCode == 38) {
        $targetElement = $('.active').prev('img');
    }
    if (!$targetElement.length) {return;}
    $('.active').removeClass('active');
    $targetElement.addClass('active');

    //scroll element into view    
    $('html, body').clearQueue().animate({scrollTop: $targetElement.offset().top }, 1000);
});