div 내의 scrollTop <a> 태그

Question

net에서 검색하고 많은 것을 시도했지만 scrollTop이 무작위로 스크롤됩니다. 링크를 클릭하면 div 내에서 스크롤하고 싶습니다.

내 사업부 :

<div id="test" style="height:400px; overflow-y: auto;"> 
    <img src="basjhdba1.jpg" id="item_1"> 
    //longtext here 
    <img src="basjhdba2.jpg" id="item_2"> 
    //longtext here 
    <img src="basjhdba3.jpg" id="item_3"> 
    //longtext here 
</div> 

세 링크 :

<a href="javascript:void(0);" onclick="changeItemDisplay(1)">Item 1</a> 
<a href="javascript:void(0);" onclick="changeItemDisplay(2)">Item 2</a> 
<a href="javascript:void(0);" onclick="changeItemDisplay(3)">Item 3</a> 

온 클릭 방법 :

changeItemDisplay: function(a) 
{ 
    var target = "#item_"+a; 

    $("#dishesresults").stop().animate({scrollTop: ($(target).position().top)+"px"}, 800); 
} 

이 올바르게 작동하지 않습니다,하지만 그들은 스크롤이 몇 가지 패턴이있다. 한 링크를 두 번 연속 클릭해도 매번 이동합니다. 무엇이 원인인지 모릅니다.

Answer 1

위치를 확인하지 않아 div가 임의로 스크롤됩니다.

스크롤 할 수있는 영역 (scrollTop) 위의보기에서 숨겨진 픽셀 수와 $('#test')의 현재 위치 (offset)를 알아야합니다. 보조 노트로

는 : 더 나은 아이디어 대신 onclick 이벤트와 이벤트 핸들러를 바인딩의, 속성

JSFiddleand this is why.는 (사용 브람 Vanroy 템플릿)

<a href="#item_1" class="changeItem">Item 1</a> 
<a href="#item_2" class="changeItem">Item 2</a> 
<a href="#item_3" class="changeItem">Item 3</a> 

<script> 

    $(function() { 
     $('.changeItem').click(function (e) { 
      e.preventDefault(); 
      var target = $(this).attr('href'); 
      $('#test').stop().animate({ 
       scrollTop: $('#test').scrollTop() - $('#test').offset().top + $(target).offset().top 
      }, 800); 
     }); 
    }); 

</script>