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

Question

我正在使用 jQuery 的 scrollTo使用向上箭头和向下箭头上下滚动我的页面的插件。

我有一堆类为“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> 

此外，如果需要，我可以提供一个链接，如果它可以帮助其他人获得更好的主意的话。

编辑而且，我忘了提及这里真正的问题是什么。问题是它不会向下滚动超过第一个元素，正如 seth 提到的那样。

Answer 1

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

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