Geek asks and answers

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

Im working on a parallax site which is quite long (e.g. 12k pixels). I want to create a list of scroll points that I think will improve the user interface.

What I think I need to do: 1) create an array that will consist of scroll points, for example, 0px 850px 1300px 2000px 2500px (since it would be simple enough so that I can understand :) 2) on keydown keyCode == 37 move (animate) to the previous point, on keyCode == 39 or keyCode == 32 go to the next point 3) if its the first scroll point, do not go to the previous one, since it does not exist, the same with the last scroll point

Can anyone care for me a bit how to write code? This is the first time I will use javascript / jquery (or programming in general)

+3
source share
3 answers

A plugin is not required, although you may need to change the following code to work with input fields, in which you also want to use arrow navigation.

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

You can also easily convert scrolltops to animations.

EDIT: Added animation for scrolling.

+2
source

You can attach an identifier to your scroll elements and use this jQuery plugin to determine which one is in the viewport. http://patik.com/blog/within-viewport-javascript-and-jquery-plugin/

, .next() .prev().

, .

EDIT: , bullseye ; , . , .

http://jsfiddle.net/NMHaW/

.

+1

I think you should take a look at how twitter implemented this in its bootstrap. They call it scrollspy, and you can find information here:

http://twitter.github.com/bootstrap/javascript.html#scrollspy

0
source

More articles:


All Articles