Search code examples
javascriptjquerycssparallax

Creating points on a website that I could scroll to using keyboard arrows

Im working on a parallax site that is pretty long (like 12k pixels). I want to create a list of scrollpoints, which i think would improve user experience.

What i think i need to do: 1) create an array that would consist of scrollpoints, for example 0px 850px 1300px 2000px 2500px (as it would be easy enough so i could understand :) 2) on keydown keyCode == 37 move (animate) to the previous point, on keyCode == 39 or keyCode == 32 move to the next point 3) if its first scroll point, dont go to the previous one as it doesnt exist, same with last scroll point

Could anyone tutor me a bit how to write the code? It's the first time i gonna use javascript/jquery (or programming at all)

Solution

  • No plugin required, though you may need to modify the following code to work with input fields where you want to be able to use arrow navigation as well.

    http://jsfiddle.net/lazerblade01/EDwbg/1/

    You can convert the scrolltops to animations easily enough as well.

    EDIT: Added animation to scroll.