jQuery에서 링크 위로 마우스를 가져 가면 div를 다른 div로 스크롤 할 수 있습니까?

Question

매우 설명하기가 어렵습니다. 특히 프로그래밍의 개념을 처음 접했으니까요.

하지만 오른쪽에 마우스를 올려 놓았을 때 로고가 링크와 일치하도록 변경하고 싶습니다. 나는 애니메이션을 적용하여 다른 모든 로고를 지나치는 '스크롤'을하여 올바른 웹 사이트로 이동하게하고 싶습니다. 마치 일부 웹 사이트가 늦게까지 수행 한 것과 같습니다.

모든 로고는 div 안에 포함되며 모든 로고는 필요한 경우 고유 한 클래스를 갖습니다. 링크도 마찬가지입니다.

jQuery 중독자는 몇 줄의 코드에서 이것을 알아낼 수 있습니다. 또는 튜토리얼을 가르쳐주세요. 도와달라고 도와주세요!

EDIT : 좋아, jAndy의 제출은 매우 편리했지만, 모든 코드를 작성하는 방법에 집착했습니다. 내가 올바른 방향으로가는거야?

<div id="nav"> 
    <div id="nav_left"> 
     <h1 class="home"><em>name</em>:home</h1> 
     <h1 class="about"><em>name</em>:about</h1> 
     <h1 class="folio"><em>name</em>:folio</h1> 
     <h1 class="contact"><em>name</em>:contact</h1> 
    </div> 
    <div id="nav_right"> 
     <ul> 
      <li><a href="#" class="lhome">Home</a></li> 
      <li><a href="#" class="labout">About Me</a></li> 
      <li><a href="#" class="lfolio">Portfolio</a></li> 
      <li><a href="#" class="lcontact">Contact Me</a></li> 
     </ul> 
    </div> 
</div> 

Answer 1

체크 아웃 아리엘 Fleslers scrollTo 플러그인

Answer 2

쉬운 예에 simiar 보일 것이다 것 :

는

$('a.MyAnchorClass').bind('mouseenter', function(){ 
    $('div.MyDivClassWithLogos').animate({ 
     'scrollTop': $('img.MyImgClass').offset().top 
    }, 1500); 
}); 

예 : jAndy의 대답은 아마 http://jsbin.com/uliti3/2/edit

$(document).ready(function(){ 
    $('#nav_left').find('h1').each(function(i,v){ 
     $.data(this, 'pos', $(this).offset()); 
    }); 

    $('#nav_right').find('a').bind('mouseenter', function(e){ 
     var _target = '.' + e.target.className.substr(1); 

     $('#nav_left').stop(true, false).animate({ 
      'scrollTop': $(_target).data('pos').top 
     }, 1500); 
    }); 
}); 

Answer 3

하지만 무엇을 이걸 보니 또 다른 방법을 공유 할거라고 생각 했어. demo

나는 previous question에 대답했다. 클릭 한 후 div를 스크롤하여 작동하는 메뉴 시스템을 사용했다. click을 mouseover으로 변경하여 데모를 간단히 업데이트했습니다.