如何使用公式設置動畫scrollTop和scrollLeft值？

Question

我有以下代碼...

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值。允許我更改div的左側和頂部位置，而不必擔心編輯我的jquery。

我可以看到公式在我腦海中，但只是不知道如何實現它到jQuery中。公式應該是這樣的......

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

，而不是

'scrollTop': '2990px' 

和

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

的

'scrollLeft': '1990px' 

代替它找到「頂部的值'和'左'爲#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/