jquery vertical scrolled menu (scrollTo?)

Question

http://www.pitgroup.nl/over-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;} 

그것은 simpliest 수직 목록 그리고 지금 나는 주어진 링크 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; 
});