基于子元素滚动到可拖动对象的坐标

Question

希望我能在这里得到一些帮助。我想滚动到可拖动对象（jqueryUI）中的元素并居中，这样无论可拖动对象在其父对象中的哪个位置，它都会滚动到此特定子对象的位置。这是一些html

<div class="widget-container">
    <div class="widget-map-elements">
        <span id="group1">•</span>
        <img src="img/draggable.jpg" width="768" height="566" alt=""/>
    </div>
</div>

<p class="show-first">
    <a class="scrollme" href="#group1">center first observations</a>
</p>

到目前为止我的jquery（错误地以哈希为中心）是：

$( ".widget-map-elements" ).draggable();

$(".scrollme").click(function(event) {
    event.preventDefault();
    var offsetTop = $(this.hash).offset().top - $(".widget-container").offset().top;
    var offsetLeft = $(this.hash).offset().left - $(".widget-container").offset().left;
    $( ".widget-map-elements" ).animate({ top: offsetTop / 2, left: offsetLeft / 2 }, { duration: 2000, queue: false });    
});