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

我使用jQuery的scrollTo插件上下滚动我的页面，使用向上箭头和向下箭头。滚动到下一个元素通过按键＆scrollTo插件 - jQuery

我有一堆与类“屏幕”的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。

来源

2009-07-18 sqram

你的问题是什么？ – 2009-07-18 04:52:37

对不起。刚刚编辑了一个真正的问题。 – sqram 2009-07-18 05:21:39

这里没有真正的问题，但我会猜测问题是您的页面不会滚过第一个页面。这是因为你把这种对每一个按键：

  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-18 05:11:26 seth

好的。谢谢。现在就试试。 – sqram 2009-07-18 05:23:42

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

为什么不这样做

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

而是采用scrollTo？

来源

2009-07-18 05:57:38

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

回答

相关问题