Question

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. i need to display Test 62 on top. but out put is coming as Test 82.

<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>​

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

Link

Answer 1

You should position your ul element relatively:

<ul id="ulScrollTopTest" style="height: 40px; overflow: auto; position: relative">

http://jsfiddle.net/dK95e/