Question

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

我有一堆带有“屏幕”类的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;
                }
          });

Answer 2

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

为什么不做类似

的事情

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

而不是使用scrollTo？

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

2 个答案: