滚动顶部功能无法按预期执行

Question

我正在使用dragscroller插件通过鼠标移动使div可滚动！可滚动div中有大约100个子元素。这些元素具有绑定的点击事件。我想要做的是当点击一个子元素时，它应该滚动到div的顶部。我使用以下函数来解决这个问题，但问题是当我手动滚动到底部的元素并单击时，它会滚动到一个不期望的位置。

function billScroller(elem){
    var parentTopCoordinate = $('#bill-list').offset().top;
    var elementCoordinate = $(elem).parent().offset().top;
    var scrollPosition = ( elementCoordinate - parentTopCoordinate ) - 2;

    $('#bill-list').animate({ scrollTop: scrollPosition },1000);

}


$(document).on('click',".bill-description",function()
    {
        //close all bills 
        $(".bill-item-list").not($(this).next(".bill-item-list")).slideUp(600);

        billScroller(this);

        //open the clicked bills
        $(this).next(".bill-item-list")
            .slideToggle(600);


    });

我该如何解决这个问题。我试图创建一个小提琴，但代码太多，一些元素是使用ajax响应绘制的。

更新：这是元素层次结构。

<div id="bill-list">

                        <div id="bill-panel">
                        <!-- Bill -->
                        <div class="bill">

                            <!-- Bill description - Holds Bill details -->
                            <div class="bill-description">
                                <div class="bill-info bill-number"><span>000A</span></div>
                                <div class="bill-info table-name"><span>TABLE 78</span></div>
                                <div class="bill-info room-number"><span>A678</span></div>
                                <div class="bill-info amount"><span>76.00</span></div>
                                <div class="bill-remove-icon"></div>
                            </div>

                            <!-- Bill Item list -->
                            <div class="bill-item-list">

                                <!-- Item : This is a sample element & will be cleared when system loads -->
                                <div class="bill-item">

                                    <!-- Item image -->
                                    <div class="bill-item-img"></div>

                                    <!-- Item description -->
                                    <div class="bill-item-description">
                                        <div class="bill-item-name">

                                            <!-- Item Name -->
                                            <p class="bill-item-name-left">Normal Cofee</p>

                                            <!-- Item Price -->
                                            <p class="bill-item-name-right">170.00</p>

                                            <div class="clear"></div>
                                        </div>

                                        <!-- Total item price -->
                                        <div class="bill-item-price">
                                            <span>170.00</span>
                                        </div>

                                        <!-- Item Quantity -->
                                        <div class="bill-item-amount">
                                            <span>1</span>
                                        </div>

                                    </div>

                                    <!-- Increas & Decrease item Quantity -->
                                    <div class="bill-amount-selection">
                                        <a class="amount-increase" href="#"></a>
                                        <a class="amount-decrease" href="#"></a>
                                    </div>

                                </div>

                                <!-- Remove bill link -->
                                <div class="item-drop-point"></div>

                            </div>
                        </div>
                        </div>                      

                    </div>

Bill Panel是可滚动的，并且使用ajax调用生成Bills。账单可以包含多个项目，切换滑动功能用于打开和关闭项目列表。