通过向上和向下箭头导航到特定的锚定标签

Question

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?

Answer 1

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();
});