Erstellen von Punkten auf einer Website, die ich mit der Tastatur scrollen konnte

Question

Ich arbeite an einer Parallax-Site, die ziemlich lang ist (wie 12k Pixel). Ich möchte eine Liste von Scrollpoints erstellen, die meiner Meinung nach die Benutzererfahrung verbessern würde.

Was ich glaube, ich brauche: 1) Erstellen Sie ein Array, das von scrollpoints, zum Beispiel 0px 850px 1300px 2000px 2500px (wie es wäre leicht genug bestehen würde, so kann ich verstehen konnte :) 2) auf keydown keyCode == 37 move (animate) zum vorherigen Punkt, auf keyCode == 39 oder keyCode == 32 gehe zum nächsten Punkt 3) Wenn es der erste Scroll-Punkt ist, gehe nicht zum vorherigen, da es nicht existiert, genauso wie zum letzten Scrollpunkt

Kann mir jemand ein bisschen beibringen, wie man den Code schreibt? Es ist das erste Mal, dass ich javascript/jquery (oder Programmierung überhaupt) verwenden werde

Answer 1

Kein Plugin erforderlich, obwohl Sie möglicherweise den folgenden Code ändern müssen, um mit Eingabefeldern zu arbeiten, in denen Sie auch die Pfeilnavigation verwenden können.

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

Sie können die scrolltops zu Animationen leicht genug, um auch konvertieren.

EDIT: Animation zum Scrollen hinzugefügt.

Answer 2

Ich denke, dass Sie einen Blick darauf werfen sollten, wie Twitter dies in ihrem Bootstrap implementiert. Sie nennen es scrollspy und Sie können Informationen finden Sie hier:

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

Answer 3

Sie können eine ID zu Ihrem Scroll Punktelemente und die Verwendung dieses jQuery-Plugin, welches auf dem Bildfenster ist zu erkennen befestigen. http://patik.com/blog/within-viewport-javascript-and-jquery-plugin/

Von dort ist es so einfach wie mit .next() und .prev().

Ich werde versuchen, ein Geigenbeispiel hinzuzufügen, sobald ich kann.

EDIT: Leider konnte ich nicht Bullseye auf Geige arbeiten; aber hier ist der Code, wenn Sie es immer noch wollen. Es ist unvollständig, da ich den Rest der Logik Ihnen überlassen möchte. obwohl

http://jsfiddle.net/NMHaW/

Dies sollten Sie auf die richtige Richtung zeigen.