One-page Html5 Navigation!


I’d like to know if anyone knows a tutorial on how to make a One-page navigation that goes to the next page upon pressing up or down arrow key or using the scroll of the mouse. Here’s an example website that uses the same effect that I’d like to achieve.


Thanks in advance :slight_smile:

Hi Jazzz. Welcome to the forums. :slight_smile:

Despite the common perception that all things cool on the web must have something to do with HTML5, this sort of effect has nothing to do with HTML, but is provided by JavaScript (so I’ve moved this to the JS forum).

This is a common scroll effect, in most cases provided by the jQuery JavaScript library. There are various scripts out there written to do this. Here’s a tutorial on how to do it:

Thank you. I’ve checked the tutorial but i dont think its quite the same thing. If you notice in the link i provided, you only scroll between pages through either the mouse scroll wheel or keyboard up and down buttons. I already know how you can navigate to certain part of the page through jquery, but I’d like to know how can i achieve the scroll wheel and keyboard navigation effect.


Ah, I see. You can always peek at the page’s code, of course. They are using jQuery. They do reference the inspirations behind the script, such as, and the script has an MIT license:

Copyright (c) 2011 Brandon Aaron (

  • Licensed under the MIT License (LICENSE.txt).

This usually means you can use the code if you keep that credit in the code.

Mind you, the script is very jerky in my browser (Chrome).