jquery vertical scrolled menu（scrollTo？）

Question

http://www.pitgroup.nl/over-ons/（左のonsメニューより）のようにメニューを取得することは可能ですか？

私は何を持っていることは次のとおりです。CSSの

<div class="scrollmenu"> 
    <ul class="scrollframe"> 
     <li><a href="#">Tony Start - CEO</a></li> 
     <li><a href="#">John Connor - Art Director</a></li> 
     <li><a href="#">Samatha Carter - Designer</a></li> 
     <li><a href="#">John Smith - Web developer</a></li> 
     <li><a href="#">Matthew Smith - Web developer</a></li> 
     <li><a href="#">John Doe - Web developer</a></li> 
     <li><a href="#">Kim Lee - Web developer</a></li> 
     <li><a href="#">Jason Stone - PHP programmer</a></li> 
     <li><a href="#">Veronica Moore - SEO Specialist</a></li> 
     <li><a href="#">Mandy Ovanova - Marketing Manager</a></li> 
    </ul> 
</div> 

ビット：

.scrollmenu {width:428px;border-left:1px solid #e4e4e4;border-right:1px solid #e4e4e4;height:132px;overflow:hidden;} 
.scrollmenu ul {list-style:none;padding:0px;margin:0px;} 
.scrollmenu ul li {display:block;} 
.scrollmenu ul li a {display:block;height:32px;border-bottom:1px solid #e4e4e4;line-height:32px;padding:0px 0px 0px 15px;text-transform:uppercase;color:#484848;background:#f4f4f4;} 
.scrollmenu ul li a:hover, .scrollmenu ul li a.current {background:#e4e4e4;} 

それは最も単純垂直リストだと、今私はそれが与えられたリンクhttp://www.pitgroup.nl/over-ons/のように振る舞うしたいと思います。私は数時間このようなものを探していましたが、見つかったスクリプトだけがドロップダウンや同様のメニューでしたが、上のページのようには動作しませんでした。

誰かが助けてください、私はこのようなものを作るためにjqueryのドキュメントで何を読みますか？それともあなたの人のうちの何人かは既にこのようなものを持っていますか？

編集：位置をクリックすると、リスト全体が下に移動していることがわかります。これが必要な効果です。

Answer 1

jQueryのanimate関数を呼び出すホバーイベントハンドラが必要です。このようなもの：

$(".scrollmenu li").hover(function() { 

    $(this).animate({ 
     margin-left: '+=10', //or whatever number of pixels you want   
     }, 600); 

    }, function() { 

     $(this).animate({ 
      margin-left: '-=10',    
      }, 600); 

    }); 

}); 

Answer 2

これは問題ありませんか？

デモ：http://jsfiddle.net/XN6VL/2/

コード：

$('.scrollmenu a').click(function() { 
    var ul = $(this).closest('ul'), 
     len = ul.children().length, 
     ix = $(this).parent().index(), 
     c = 'selected', 
     h = $(this).outerHeight(); 

    ix = ix < 2 ? 2 : ix > len - 3 ? len - 3 : ix; 
    ul.animate({'marginTop': (2 - ix) * h}); 
    $(this).addClass(c).parent().siblings().children('.' + c).removeClass(c); 
    return false; 
});