Javascript 通过按键向下滚动到下一个元素&；滚动到插件-jQuery

我使用jQuery的插件来上下滚动我的页面，使用向上箭头和向下箭头

我有一堆类为“screen”的div，因此：

…

我想做的是，当我按下向上或向下键时，窗口会滚动到下一个或上一个div，类为“screen”

我把按键都搞定了。 根据插件文档，要滚动窗口，请使用$.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 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所提到的。

这里没有真正的问题，但我猜问题是你的页面没有滚动超过第一个元素。因为你在每次按键时都会这样叫：

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

---

我刚刚实现了一些类似的东西，并为每个元素使用了

id

属性

为什么不做类似的事情呢

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

---

而不是使用

滚动到
？
对不起。只是用一个真实的问题编辑了它。回来。当我按下向下箭头时，它确实工作得很好。但当它压上去的时候，它有点像马车。你的帮助很好，我会尽力从这里接受的。但是，如果您或某人碰巧仍然需要帮助，可以在这里看到输出：9leaves.com/showcase。php@lyrae如果他解决了你的问题，你应该接受他的答案，或者至少投上一票…@TM但问题没有解决。我的意思是，它部分地做到了。它向下滚动，但我必须按两次向上滚动。不过我非常感谢他的帮助。是的，我通常倾向于+1我的帖子中的每个答案，只是为了他们花时间来帮助我。（但我最后还是这么做了）哎哟……脑屁。更新了修复错误的答案。我的质量保证部在哪，该死的！？我猜你是我的QA。：）很抱歉，lyrae。无法真正为每个DIV提供ID属性。我不知道会有多少个DIV，并且允许滚动图像的javascript将停止工作，除非我为每个ID都有一块代码=（您可以使用“.sections li”之类的选择器循环所有列表项，并使用JavaScript分配id。或者，您可以在服务器上生成id，并让JavaScript知道有多少个id。查看我网站上的脚本（通过我的个人资料）例如，这将导致在浏览器历史记录中写入一个条目，这可能是不可取的。