divをjQueryを使用してページ上の特定の位置に移動するにはどうすればよいですか？

Question

リンクをクリックすると、赤いdivが表示され、click meリンクの下に座るようにしようとしています。

$('.clickMe').click(function() { 

    var pos = $(this).offset().top;   

    $('.myDiv').animate({ 
     marginTop: '-'+pos+'px', 
    }, 1000);  

}); 

<a href="" class="clickMe">Click Me</a> 
<br /><br /><br /><br /><br /><br /><br /><br /> 
<div style="position: absolute; border: 1px solid red; height: 50px; width: 50px" class="myDiv"></div> 

ここに私の失敗の試みです：

http://jsfiddle.net/SWqmb/4/

私はこの作業を取得するにはどうすればよいですか？

Answer 1

負のマージンは、望ましくない影響を持つことができ、topプロパティは、おそらくより良い選択であるアニメーション、代わりにこれを試してみてください：

は

$('.clickMe').click(function(e) { 

    e.preventDefault(); 

    var pos = $(this).offset().top;   

    $('.myDiv').animate({ 
     top: pos + $(this).height() 
    }, 1000); 

}); 

デモ：http://jsfiddle.net/SWqmb/6/

Answer 2

これは動作するはずです。 http://jsfiddle.net/SWqmb/8/

しかし、私はそれを行う最良の方法ではないと思います。