How to scroll to li element in a ul list

Question

I have a ul list inside a div with li elements and inside the li elements is a single checkbox. I have the id for the checkboxes. So I want to get the parent li element of the checkbox and scroll to it's position. And I can't make it work.

My html is like this:

<div id="divElement">
   <ul>
      <li>
         <input type="checkbox" id="343532532523" />
      </li>
   </ul>
</div>

I tried these two methods and they don't work for me:

$('#divElement').scrollTop($('#343532532523').parent().position().top);
$('#divElement').firstChild().scrollTop($('#343532532523).parent().position().top);

Answer 1

If anyone needs a vanilla JS version, the following is working well for me, the value of 50 is just so that I'm showing the whole item when I'm near the top of the list. You can adjust that.

function updateListSelection(liID) {

    var list = document.getElementById("id Tag Of The <UL> element"),
        targetLi = document.getElementById(liID); // id tag of the <li> element

    list.scrollTop = (targetLi.offsetTop - 50);
};

Answer 2

I had another dev friend of mine help me and we came up with this and it works, no animate, I could do it I just don't need it..

var offset = $('#someDivElementId ul li').first().position().top;
$('#someDivElementId').scrollTop($('#23532532532532').parent().position().top - offset);