программная прокрутка набора div внутри родительского div

У меня есть родительский div, заполненный несколькими дочерними div (см. Здесь, о чем я говорю http: //garyoak.com/images/MgMenu.png). Я хотел бы иметь возможность перемещаться по нему только с помощью клавиатуры, поэтому я искал способ прокрутки дочерних div вверх или вниз, когда пользователь нажимает на видимые элементы. Я могу без проблем определить, когда пользователь это сделал, но я не уверен, как на самом деле прокручивать внутренние блоки вверх / вниз. У меня есть jquery, и я могу без проблем добавлять к нему расширения. Я знаю плагины jquery, такие как scrollable и carousel, но надеюсь, что есть более простой способ сделать это.

html в конечном итоге выглядит следующим образом:

    

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

первый div имеет MagicPanelSelected в качестве своего класса, так как это текущий выбранный div. Я могу гарантировать, что любой активный / важный div, который мне нужно отображать, всегда будет иметь этот класс.

С точки зрения сценария использования, я использую его для разработки меню для игры на C ++ (поэтому несколько предопределенных переменных помещаются на страницу, которая затем отображается с помощью awesomium). Вот почему я хочу сделать это без использования мыши. Awesomium основан на сравнительно недавней сборке Chrome, поэтому решение НЕ обязательно должно быть кроссбраузерным, пока оно работает в Chrome.

Я могу гарантировать фиксированную длину для размера родительского и дочернего div. (как только я выберу подходящую длину), однако количество div-ов MagicPanel может быть загружено в родительский div-элемент MagicPanels в любой момент времени в диапазоне от 0 до 120+. У меня есть переменные, которые могут сказать мне, сколько всего 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 и т. д.) просто определяют градиенты / font для текста и никак не влияет на компоновку div.

Если кто-нибудь знает, как это сделать, или может дать мне хорошую отправную точку, я был бы признателен.

Спасибо