Scrollen nach unten zum nächsten Element über keypress & scrollTo Plugin - jQuery

Question

Ich bin mit jQuery scrollTo Plugin, um nach oben und unten meiner Seite , mit Pfeil nach oben und Pfeil nach unten.

Ich habe eine Reihe von div mit der Klasse "Bildschirm", wie es so: <div class="screen-wrapper">...</div>

Was ich versuche zu tun ist, wenn ich drücke Sie UP oder DOWN, um die Fenster blättern zum nächsten oder vorherigen div mit der Klasse von „Bildschirm“.

Ich habe die Tastenfolgen gesorgt. Nach der Plugin-Dokumentation, ein Fenster zu blättern, verwenden Sie $ .scrollTo (...);

Hier ist der Code, den ich habe:

$(document).keypress(function(e){
    switch (e.keyCode) {
        case 40:    // down
            n = $('.screen-wrapper').next()
            $.scrollTo( n, 800 );
          break;
        case 38:    // up

          break;
        case 37:    // left

          break;
        case 39:    // right

          break;

    }      
});

Und wenn es hilft, ist hier das HTML div. Ich habe ein paar davon auf der Seite und im Wesentlichen, ich versuche, indem Sie Pfeil nach unten, um den nächsten zu blättern:

<div class='screen-wrapper'>
<div class='screen'>
    <div class="sections">
        <ul>
            <li><img src="images/portfolio/sushii-1.png " /></li>
            <li><img src="images/portfolio/sushii-2.png" /></li>
            <li><img src="images/portfolio/sushii-3.png" /></li>
        </ul>
    </div>

    <div class="next"></div>
    <div class="prev"></div>
</div> 

Und auch, wenn es erforderlich ist, kann ich einen Link, wo diese verwendet werden, wenn es wird jemand helfen, eine bessere Idee.     

Bearbeiten Und, vergessen zu erwähnen, was ich die eigentliche Frage hier ist. Die Frage / Problem ist, dass es nicht über das erste Element nach unten scrollen wird, wie seth genannt.

Answer 1

Es gibt keine wirkliche Frage hier, aber ich werde das Problem erraten ist, dass Ihre Seite nicht über die ersten nicht scrollen. Es ist, weil Sie nennen dies bei jedem Tastendruck:

            n = $('.screen-wrapper').next()

Es ist der Rückkehr wahrscheinlich das gleiche jedes einzelne Mal, wenn Sie es nennen. Versuchen Sie bewegen die Instanziierung außerhalb des keypress.

          var s = $('.screen');
          var curr=-1, node;

          $(document).keypress(function(e){
             switch( e.keyCode ) {
               case 40:
                  node = s[++curr];
                  if (node) {
                    $.scrollTo( node,800);
                  }
                  else {
                    curr = s.length-1;
                  }
                  break;
                case 38:
                   node = s[--curr];
                   if (node) {
                     $.scrollTo( node ,800);
                   }
                   else {
                      curr = 0;
                    }
                   break;
                }
          });

Answer 2

Ich habe gerade umgesetzt etwas ähnliches und ich id für jedes Element Attribute.

Warum nicht so etwas wie

window.location.href = '#section-' + curr;

anstelle scrollTo verwenden?