親div内のdivのセットをプログラムでスクロール

Question

私は複数の子divでいっぱいの親divを持っています（私が話していることはhttp://garyoak.com/images/MgMenu.pngを参照）。私はキーボードだけでそれをナビゲートすることができるようにしたいので、ユーザーが目に見える要素を押したときに子divをスクロールする方法を探していました。私はユーザーが問題なくそれをやったのを知ることができますが、内側のdivを実際に上下にスクロールする方法がわかりません。私はjqueryを利用でき、問題なく拡張を追加できます。私はスクロール可能なものやカルーセルのようなjqueryプラグインを知っていますが、もっと簡単な方法があると思っています。それが現在選択されているdiv要素だと最初のdivは、クラスとしてMagicPanelSelectedた

<div id="MaigcPanels" class="MagicPanels"> 
     <div id="MagicPanel0" class="MagicPanelSelected"><div class="Ice"><div class="MagicName">Blizzara</div><div class="MPCost">36</div></div></div> 
     <div id="MagicPanel1" class="MagicPanel"><div class="Fire"><div class="MagicName">Fire</div><div class="MPCost">15</div></div></div> 
     .... (rest of panel divs) 
    </div> 

：

HTMLは次のように見てしまいます。私が表示する必要があるアクティブ/重要なdivが常にこのクラスを持つことを保証することができます。

私はこれを使用してC++ゲーム用のメニューを設計しています（いくつかの事前定義された変数がページにプッシュされており、その後awesomiumでレンダリングされます）。これが私がマウスを使わずにこれを行うことを望んでいる理由です。 Awesomiumはかなり最近のChromeのビルドをベースにしているので、Chrome上で動作する限り、ブラウザ間での互換性は必要ありません。

（私は適切な長さを決めた後に）親divと子divのサイズの固定長を保証できますが、MagicPanel divの数は0からの任意の時間範囲で親MagicPanels divにロードされます~120 +。私は変数があり、そこにはどのように多くのdivとそこに行があるのか​​を教えてくれます。

、私が（下部に再びすぐに戻っトップにスクロールして、またはループのいずれかによって、トップのdiv）を先頭にループにできるようにしたいのですが、ユーザーがスクロールのdivのセット過去

それが重要な場合、これはそれらの要素

.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クラス（すなわち火、氷など）のCSSでテキストだけのためにグラデーション/フォントを定義し、レイアウトには影響しませんがdivs。

誰かがこれを行う方法を知っている、または私にそれを感謝する良い出発点を与えることができる場合。

ありがとう

Answer 1

このようなdom要素のscrollTopを設定できます。私はこれがあなたのコードにロジックを適用するのに役立つことを願っています。

var valueToScroll = 100; 
$("selector").scrollTop(valueToScroll); 

//With animation 

$("selector").animate({ scrollTop: valueToScroll }, { duration: 200 });