1

私は次のコードを持っています...

jsフィドル

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の値を設定できるかどうか疑問に思っています。jquery の編集を気にせずに、div の左と上の位置を変更できます。

式は頭の中で見えますが、それを jQuery に実装する方法がわかりません。式は次のようになります...

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

それ以外の

'scrollTop':  '2990px'

と

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

それ以外の

'scrollLeft':  '1990px'

#it​​em div の 'top' と 'left' の値を見つけて、それらから 10 ピクセルを減算します。

私はまだあまり熟練していないので、その式を自分のjQueryに書き込む方法がわかりません。

誰でも私を助けることができますか？

4

1 に答える 1

4

.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/

于 2013-04-09T15:24:23.217 に答える