Question

I have an interaction where I have an <ul> with a long list of <li>s wrapped inside a <div> container to make them scrollable.

Now I transition the list to a state where I want to show a specific <li>as the top item. I can’t do this by using the scrollTop property since the item may be to far to the bottom to be able to scroll it in the desired position at the top of the container.

That’s why I set the relative top position of the ul to the desired value.

Please have a look at this jsFiddle: http://jsfiddle.net/pJfNp/13/

In all browsers except IE8 & 9 the active/red item is shown at the top, but Internet Explorer seems to not be able to “detach” the bottom of the <ul> from the <div>, it somehow stays anchored there. Just what would happen if I had tried to use scrollTop to show it as the first item.

I’m open to new ideas on how to do something similar!

Answer 1

tested in IE8, should work in IE9 too 🙂

jsFiddle demo

var liHeight = $('li.active').height();
$('ul').height( $('ul').height() + (liHeight*3) );
var activePos = $('li.active').position().top;
$('div').animate({scrollTop:activePos},1000);

if you need to display sometimes the last li that means that you need extra 3 li heights so just multiply it with 3 and add the result to the the ul element height.

Than to animate, animate the scrollTop of your div