3

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

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

我想要做的是，当我按下 UP 或 DOWN 时，窗口滚动到下一个或上一个具有“屏幕”类的 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所述。

4

2 回答 2

5

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

            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;
                }
          });
于 2009-07-18T05:11:26.193 回答
1

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

为什么不做类似的事情

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

而不是使用scrollTo？

于 2009-07-18T05:57:38.300 回答