向下滚动通过按键与scrollTo插件下一个元素 - jQuery的(Scrolling down

我使用jQuery的scrollTo插件上下滚动我的网页，使用向上和向下箭头。

我有一堆与类“屏幕”的div，像这样： <div class="screen-wrapper">...</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> 

并且如果它需要，我可以提供这个地方被使用，如果它会帮助别人获得更好的主意的链接。

编辑和，我忘了提这里真正的问题是什么。 现在的问题/问题是，它不会向下滚动过去的第一个元素， 赛斯提及。

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

Answer 2:

我刚刚实施了类似的东西，我用id属性为每个元素。

为什么不这样做

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

而不是使用的scrollTo ？

文章来源: Scrolling down to next element via keypress & scrollTo plugin - jQuery