수식을 사용하여 애니메이션 된 scrollTop 및 scrollLeft 값을 설정하는 방법은 무엇입니까?

Question

I가 다음 코드 ...

jsFiddle

CSS

#container { 
    position:absolute; 
    height:100%; 
    width:100%; 
    top:0px; 
    left:0px; 
    overflow:scroll; 
} 

#content { 
    position:absolute; 
    height:5000px; 
    width:5000px; 
    top:0px; 
    left:0px; 
    background-image:url(http://subtlepatterns.com/patterns/purty_wood.png); 
    /* I used a background image so the scroll effect was more obvious */ 
} 

#button { 
    position:absolute; 
    height:50px; 
    width:50px; 
    background-color:blue; 
    top:50px; 
    left:50px; 
} 

#item { 
    position:absolute; 
    height:250px; 
    width:750px; 
    background-color:yellow; 
    top:3000px; 
    left:2000px; 
} 

HTML

<div id="container"> 
    <div id="content"> 
     <div id="button"></div> 
     <div id="item"></div> 
    </div> 
</div> 

JQuery와

가 현재 작동으로

$('#button').click(function() { 
    $('#container').animate({ 
     'scrollTop': '2990px' 
    },{duration: 1000, queue: false}); 
    $('#container').animate({ 
     'scrollLeft': '1990px' 
    },{duration: 1000, queue: false}); 
}); 

파란색 버튼을 누를 때, 2990px ​​상단과 1990px ​​왼쪽과 노란색 항목 컨테이너 스크롤 (그것의 상단과 왼쪽 측면에 10px의 간격을두고)보기에 제공 그것은 내가하고 싶은 것입니다.

그러나이 값을 수식으로 변경할 수 있는지 궁금해서 항목 div의 왼쪽 및 위쪽 위치에 따라 scrollTop 및 scrollLeft 값을 설정합니다. 내 jquery 편집에 대해 걱정할 필요없이 div의 왼쪽 및 위쪽 위치를 변경하도록 허용합니다.

내 머리 속의 수식을 볼 수 있지만 jQuery로 구현하는 방법을 모르겠습니다. 공식은 ...

'scrollTop' = (("#item" top) - 10px) 

대신

'scrollTop': '2990px' 

및

'scrollLeft': '1990px' 

의 대신

'scrollLeft' = (("#item" left) - 10px) 

과 같이해야한다 그래서 '최고 값을 찾습니다 '와'왼쪽 '을 #item div로 빼고 빼기 그들로부터 10 픽셀.

저는이 공식을 jQuery에 쓰는 방법을 모르지만 아직 익숙하지 않습니다.

아무도 도와 줄 수 있습니까?

Answer 1

.position() 또는 .offset()을 사용하여 요소의 위치를 ​​가져옵니다.

$('#button').click(function() { 
    $('#container').animate({ 
     'scrollTop': $('#item').position().top - 10 
    },{duration: 1000, queue: false}); 
    $('#container').animate({ 
     'scrollLeft': $('#item').position().left - 10 
    },{duration: 1000, queue: false}); 
}); 

jsFiddle : http://jsfiddle.net/cr2W9/2/