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);

Answer 3

I fixed this using the Element.scrollIntoView() approach:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

It worked in Chrome, Firefox and Internet Explorer - I haven't tested it in any other browsers.

Answer 4

Old question, but here is a pure js function which scrolls the LI into view at the top, if it is currently above the top, and at the bottom, if it is currently below the bottom. This gives smooth scrolling of the UL if you are using the down and up arrows to scroll through it (using addEventListener for keydown and keyup events).

function scrollUL(li) {
    // scroll UL to make li visible
    // li can be the li element or its id
    if (typeof li !== "object"){
        li = document.getElementById(li);
    }
    var ul = li.parentNode;
    // fudge adjustment for borders effect on offsetHeight
    var fudge = 4;
    // bottom most position needed for viewing
    var bottom = (ul.scrollTop + (ul.offsetHeight - fudge) - li.offsetHeight);
    // top most position needed for viewing
    var top = ul.scrollTop + fudge;
    if (li.offsetTop <= top){
        // move to top position if LI above it
        // use algebra to subtract fudge from both sides to solve for ul.scrollTop
        ul.scrollTop = li.offsetTop - fudge;
    } else if (li.offsetTop >= bottom) {
        // move to bottom position if LI below it
        // use algebra to subtract ((ul.offsetHeight - fudge) - li.offsetHeight) from both sides to solve for ul.scrollTop
        ul.scrollTop = li.offsetTop - ((ul.offsetHeight - fudge) - li.offsetHeight) ;
    }
};

Answer 5

A quirck for fun:

window.location.href = window.location.origin+window.location.pathname+window.location.search+"#343532532523"

What it does is get the url parts and set it back with the actual anchor to your element

Might work for most of the cases if your site is not a webapp sort of thing =)

Edit: There is no round trip in modern browsers, the only part of the URL that changes is the anchor. My consideration about not being a webapp is that those kind of websites usually edit anchor and history.

Answer 6

Here's a simple demo that uses jQuery position() to get the LI position within parent UL, then uses animate() to scroll the checkbox in view

http://jsfiddle.net/qKGv8/

API References:

http://api.jquery.com/position/ http://api.jquery.com/animate/

Answer 7

promptAnswerBlock-->ul element id

$('#promptAnswerBlock').scrollTop($('#promptAnswerBlock')[0].scrollHeight + 150);

150 is just a offset value

you can adjust as per your requirment