在网站上创建我可以使用键盘箭头滚动到的点

Question

我在一个相当长的视差网站上工作（像12k像素）。我想创建一个滚动点列表，我认为这将改善用户体验。

我认为我需要做的事情： 1）创建一个由滚动点组成的数组，例如0px 850px 1300px 2000px 2500px（因为它很容易让我理解:) 2）在keydown上keyCode == 37移动（动画）到上一个点，在keyCode == 39或keyCode == 32移动到下一个点 3）如果它的第一个滚动点，不要转到前一个滚动点，因为它不存在，与最后一个滚动点相同

有人可以指导我一些如何编写代码吗？这是我第一次使用javascript / jquery（或编程）

Answer 1

不需要插件，但您可能需要修改以下代码以使用您希望也能使用箭头导航的输入字段。

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

您也可以轻松地将滚动顶部转换为动画。

编辑：添加动画以滚动。

Answer 2

您可以将ID附加到滚动点元素，并使用此jQuery插件来检测视口中的哪个。 http://patik.com/blog/within-viewport-javascript-and-jquery-plugin/

从那里开始，就像使用.next()和.prev()一样简单。

我会尽快添加一个小提琴示例。

编辑： 不幸的是，我不能让靶心在小提琴上工作;但这是代码，如果你还想要它。这是不完整的，因为我想把剩下的逻辑留给你。

http://jsfiddle.net/NMHaW/

但这应该指向正确的方向。

Answer 3

我认为你应该看看twitter如何在他们的bootstrap中实现这一点。 他们称之为scrollspy，你可以在这里找到信息：

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