Search code examples
jqueryscrolltoparrow-keys

Add arrow key navigation to jQuery scrollTop

I'm using jQuery scrollTop to navigate through points on a page. Works great. But I was wondering if it would be possible to add up/down arrow key navigation to it. So for instance, down arrow scrolls to the next point, next point, etc. Up arrow goes back one point, etc, etc. Any help on this one is greatly appreciated!

HTML:

<a class="bookmark" href="#option1">Option 1</a>
<a class="bookmark" href="#option2">Option 2</a>
<a class="bookmark" href="#option3">Option 3</a>

<div id="option1">Stuff</div>
<div id="option2">Stuff</div>
<div id="option3">Stuff</div>

jQuery

$( '.bookmark' ).click(function() {
    var elementClicked = $(this).attr( "href" );
    var destination = $(elementClicked).offset().top;
        $("html:not(:animated),body:not(:animated)")
           .delay( 300 ).animate({ scrollTop: destination-20}, 700 );
    return false;
});
Solution

  • Not exactly an answer to your question, but jscrollpane has this feature built in, if you wanted to try using that.

    In the initialization you just enter { showArrows: true; } and done.