jQuery Plugin For Custom Keyboard Page Navigation

A small accessible jQuery plugin which allows the visitors to navigate between next/prev containers with custom hot keys.

How to use it:

1. Include the jQuery library and the jQuery keyboard navigation plugin in the page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.hotkeys.js"></script>

2. Include the jQuery hotkeys plugin for custom keyboard events.

<script src="jquery.keyboard-navigation.js"></script>

3. Wrap your content into multiple containers with the same class.

<div class="posts">
  <div class="post">Section 1</div>
  <div class="post">Section 2</div>
  <div class="post">Section 3</div>
  ... 
</div>

4. Initialize the plugin and bind the custom keyboard events.

$(function(){

// init jquey navigation
$('.posts').keyboardNavagation();

// w - next
$(document).bind('keydown', 'w', function(){
$('.posts').trigger('scrollNext');
});

// s - prev
$(document).bind('keydown', 's', function(){
$('.posts').trigger('scrollPrev');
});

$('.post').on('selected', function(){
console.log('selected element', this);
})

});

Change log:

2014-09-14

• fix img tag bug

2014-09-09

• add selected class

---

This awesome jQuery plugin is developed by kulakowka. For more Advanced Usages, please check the demo page or visit the official website.