问获取容器顶部与单击的元素之间的差异

EN

    <style>
#contact-list-scroller {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background: Silver;
    overflow:scroll;
    width: 200px;
}

#contact-list-scroller div {
    background: white;
    width: 150px;
    height: 150px;
    border: 1px solid Gray;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="position:relative; width:150px; height:100vh;">
<div id="contact-list-scroller">
   <div class="test" id="contact_8965">stuff1</div>
   <div class="test" id="contact_8966">stuff2</div>
   <div class="test" id="contact_8967">stuff3</div>
   <div class="test" id="contact_8968">stuff4</div>
   <div class="test" id="contact_8969">stuff5</div>
   <div class="test"></div>
   <div class="test"></div>
   <div class="test"></div>
   <div class="test"></div>
   <div class="test"></div>
</div>
</div>
<script>
$('.test').click(function(){

var contactTopPosition = $(this).offsetTop;
var containerTop = $('#contact-list-scroller').scrollTop();
var heightDifference = containerTop - contactTopPosition;
console.log(contactTopPosition + ' contactTop');
console.log(containerTop + ' containerTop');
console.log(heightDifference + ' heightDifference');

//$("#contact-list-scroller").scrollTop(contactTopPosition);
$("#contact-list-scroller").animate({scrollTop: heightDifference,
    complete: $(this).unbind()
  });
});

</script>