通过按键和scrollTo插件向下滚动到下一个元素 - jQuery

我正在使用 jQuery 的scrollTo http://flesler.blogspot.com/2007/10/jqueryscrollto.html插件使用向上箭头和向下箭头向上和向下滚动我的页面。

我有一堆带有“screen”类的 div，如下所示：<div class="screen-wrapper">...</div>

我想做的是，当我按向上或向下键时，窗口滚动到下一个或上一个具有“屏幕”类别的 div。

我已经处理好按键了。 根据插件文档，要滚动窗口，可以使用 $.scrollTo(...);

这是我的代码：

$(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;

    }      
});

如果有帮助的话，这是 HTML div。我在页面上有一些这样的内容，本质上，我试图通过按向下箭头滚动到下一个：

<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> 

另外，如果需要的话，我可以提供一个正在使用的链接，如果它可以帮助某人获得更好的想法。

edit而且，我忘了提及这里真正的问题是什么。 问题是它不会向下滚动超过第一个元素，因为seth提及。

这里没有真正的问题，但我猜问题是您的页面没有滚动到第一个页面。这是因为你在每次按键时都会调用它：

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

每次您调用它时，它可能都会返回相同的值。尝试将实例化移到按键之外。

          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;
                }
          });