One Page Scroll with arrow keys

gistfile1.md

For all those interested in the scroll-effect, as well as those with concerns that the arrows/page down key don't work (laptops): First, you can click the pagination buttons.

But that's not fun. Here's the fix to make the arrows/page-keys work like they should:

First, this is a super easy plugin to use with jQuery. The developer is really, REALLY talented, I highly recommend you check out his main website.

Here's the dev's plugin: One Page Scroll

Here's the code used to initialize it in the ready() function:

$('.main').onepage_scroll({
    sectionContainer: '.section'
});

and here's the markup:

<div class="main">
   <div class="section">1</div>
   <div class="section">2</div>
   <div class="section">3</div>
</div>

Don't forget to include the CSS file located on the git for this plugin!

As for the arrow-key events for paginating up or down, that's super easy too; he doesn't document it but the code is easy to read. Target the same element and fire moveUp() or moveDown to trigger it. From there it's a matter of binding those events to the proper key-down.

Like this:

$(document).keydown(function(e){
  if (e.keyCode == 40 || e.keyCode == 34) { 
    // if the key pressed is down or pagedown
    $('.main').moveDown();
  } else if (e.keyCode == 33 || e.keyCode == 38) {
    // if the key pressed is up or pageup
    $('.main').moveUp();           
  }
});

Add that as the last bit of code you write and you're set.