0

I am currently using anchor tags and have implemented smooth scrolling on 5 links. This currently works perfectly. However, I would now like to add the ability to use the arrow keys to navigate through these same anchor tags.

I can only fumble through javascript and jquery, so I'm pretty confused when it comes to that stuff. 

<ul>
    <li class="scrolldot"><span><a href="#one">1</a></span></li>
    <li class="scrolldot"><span><a href="#two">2</a></span></li>
    <li class="scrolldot"><span><a href="#three">3</a></span></li>
    <li class="scrolldot"><span><a href="#four">4</a></span></li>
    <li class="scrolldot"><span><a href="#five">5</a></span></li>
    <li class="scrolldot"><span><a href="#six">6</a></span></li>
</ul>

So basically, I want a user to hit the down arrow and them to be taken to the next section, depending on where they are on the page. If they are on section 2, take them to three. If they hit up again, they would be taken back to two and so forth. Make sense?

dnpayne
  • 13
  • 1
  • 7

1 Answers1

0

Checkout Mousetrap. It's a nifty little library that makes binding keys pretty easy. There are a few good examples on the site as well.

Perhaps something like this would suffice:

Mousetrap.bind('up', function() {
    your_up_function();
});

Mousetrap.bind('down', function() {
    your_down_function();
});
Julio
  • 2,261
  • 4
  • 30
  • 56
  • This might be a step in the right direction. I have posted my code above as it may be a little more complicated since I need to navigate to specific anchor tags and I will need to know where the user is on the page. – dnpayne Feb 08 '13 at 16:51
  • It kind of sounds like you want the up arrows to not only change the content, but to also indicate where they are in the ul? If that's the case, have a look at scrollspy (http://twitter.github.com/bootstrap/javascript.html). Notice on the left how when you move down, the navigation changes. You'd need to hook the functionality with the arrow keys still, but I believe this would work. – Julio Feb 08 '13 at 18:45