Blättern zum nächsten Element über Tastendruck & ScrollTo-Plugin - jQuery

Question

Ich benutze scrollTo Plugin von jQuery, um meine Seite auf und ab scrollen, 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ücken Sie UP oder DOWN, die Fenster blättert zum nächsten oder vorherigen div mit Klasse von "Bildschirm".

Ich habe die Tastenanschläge erledigt. Um ein Fenster zu blättern, verwenden Sie gemäß den Plugin-Dokumenten $ .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 Sie dies, wenn es verwendet wird Ich werde jemandem helfen, eine bessere Idee zu bekommen.

bearbeiten Und vergessen zu ich, was hier ist die eigentliche Frage zu erwähnen. Die Frage/Problem ist, dass es nicht nach dem ersten Element, wie seth genannten scrollen wird.

Answer 1

Es gibt keine wirkliche Frage hier, aber ich rate das Problem ist, dass Ihre Seite nicht über die erste Seite scrollt. Es ist, weil Sie nennen dies auf jeden Tastendruck:

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

Es ist wahrscheinlich das gleiche jedes Mal zurückkehr Sie es nennen. Versuchen Sie, die Instanziierung außerhalb des Tastendrucks zu verschieben.

  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

habe ich nur etwas ähnliches und ich für jedes Element id Attribute implementiert.

Warum nicht so etwas wie

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

statt scrollTo zu verwenden?