1

我有以下代码...

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});
});

由于它目前的工作原理，当按下蓝色按钮时，容器滚动到顶部 2990 像素和左侧 1990 像素，黄色项目进入视野（在它的顶部和左侧留下 10 像素的间隙），这就是我想要的去做。

但是，我想知道是否可以将其更改为公式，以便它根据项目 div 的左侧和顶部位置设置 scrollTop 和 scrollLeft 值。允许我更改 div 的左侧和顶部位置，而不必担心编辑我的 jquery。

我可以在脑海中看到公式，但只是不知道如何将其实现到 jQuery 中。公式应该类似于...

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

代替

'scrollTop':  '2990px'

和

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

代替

'scrollLeft':  '1990px'

所以它找到#item div的'top'和'left'的值，然后从它们中减去10个像素。

我只是不知道如何将该公式写入我的 jQuery，因为我还不是很精通它。

谁能帮我？

4

1 回答 1

4

.position()只需使用or获取元素的位置.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/

于 2013-04-09T15:24:23.217 回答