How to set scrollTop valuebased on its child selector elemet in jquery

I have unorder list html tag with scroll bar. based on the child selector i need to set Scorll Top value in jquery. if this below div tag is not there working fine. if div tag is there then i can not set the exate scroll top value.

HTML

<div style="height: 180px;"></div>
<ul id="ulScrollTopTest" style="height: 40px; overflow: auto;">
    <li data-id="1">Test 1</li>
    <li data-id="2">Test 2</li>
    <li data-id="3">Test 3</li>
    <li data-id="4">Test 4</li>
    <li data-id="60">Test 60</li>
    <li data-id="61">Test 61</li>
    <li data-id="62">Test 62</li>
    <li data-id="63">Test 63</li>
    <li data-id="81">Test 81</li>
    <li data-id="82">Test 82</li>
    <li data-id="83">Test 83</li>
    <li data-id="84">Test 84</li>
</ul>

JavaScript

$(document).ready(function () {
        var scrollTopValue = 56;
        scrollTopValue = $('#ulScrollTopTest').find('[data-id="62"]').position().top;
        $('#ulScrollTopTest').scrollTop(scrollTopValue );
    });