以编程方式在父div中滚动一组div

我有一个父div，里面有多个子div（请参阅这里我正在谈论的内容http://sofzh.miximages.com/javascript/logo_huge_domains.gif ）。 我希望能够仅使用键盘导航它，所以当用户推动可见元素时，我正在寻找一种向上或向下滚动子div的方法。 我可以弄清楚用户什么时候没有问题，但我不确定如何实际滚动内部divs up / down。 我有jquery可用，可以添加扩展名没有问题。 我知道jquery插件，如可滚动和旋转木马，但我希望有一个更简单的方法来做到这一点。

html最终看起来像这样：

 
Blizzara
36
 
Fire
15
 .... (rest of panel divs)  

第一个div有MagicPanelSelected作为它的类，因为它是当前选择的div。 我可以保证，无论我需要显示的活动/重要div，总是会有这个类。

在使用场景方面，我使用它来设计C ++游戏的菜单（因此几个预定义的变量被推入页面，然后通过awesomium呈现它们）。 这就是为什么我要在不使用鼠标的情况下这样做的原因。 Awesomium基于相当新的Chrome版本，因此该解决方案不需要跨浏览器兼容，只要它适用于Chrome。

我可以保证父div和子div的大小的固定长度（一旦我决定适当的长度），但MagicPanel div的数量可以在0到120+的任何一个时间范围内加载到父MagicPanels div中。 我有变量可以告诉我总共有多少div和每行有多少div。

当用户滚过div组时，我希望能够循环回到开头（通过快速滚动到顶部，或者通过循环顶部div再次在底部）

如果它很重要，那就是这些元素的css

 .MagicPanels { width: 580px; height: 160px; left: 4px; position: relative; display: inline-block; -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 5px 5px 5px #888; box-shadow: 5px 5px 5px #888; border-width: 16px 16px 16px 16px; -moz-border-image: url(MagicBorder.png) 33 32 33 34 round; -webkit-border-image: url(MagicBorder.png) 33 32 33 34 round; -o-border-image: url(MagicBorder.png) 33 32 33 34 round; border-image: url(MagicBorder.png) 33 32 33 34 round; z-index: 1; overflow: hidden; } .MagicPanel { width: 150px; height: 30px; margin: 0 10px 7px; opacity: 0.5; display: inline-block; position: relative; } .MagicPanelUnusable { width: 150px; height: 30px; margin: 0 10px 7px; opacity: 0.3; display: inline-block; position: relative; } .MagicPanelSelected { width: 150px; height: 30px; margin: 0 10px 7px; background-opacity: 1.0; display: inline-block; position: relative; } 

其他CSS类（即Fire，Ice等）只定义文本的渐变/字体，对div的布局没有影响。

如果有人知道如何做到这一点，或者可以给我一个很好的起点，我会很感激。

谢谢

Answer 1

您可以像这样设置任何dom元素的scrollTop。 我希望这可以帮助您在代码中应用逻辑。

 var valueToScroll = 100; $("selector").scrollTop(valueToScroll); //With animation $("selector").animate({ scrollTop: valueToScroll }, { duration: 200 } );