javascript - Jquery Scrolling Element to Position of Newly Appended Element (Calculating relative offset to parent) -

i've created horizontal list of elements. list has fixed width , scrolls on overflow. when button clicked new element added list , i'm trying scroll ul element newly created li element.

here's jquery i'm using:

var ul = $('ul')    $('button').click(function() {     var li = $('<li></li>');      ul.append(li);      ul.stop().animate({         scrollleft: li.offset().left      }, 2000); }); 

oddly if start tracing variables li.offset().left stays pretty same value first few elements , scrolling works fine until li.offset().left becomes less ul.scrollleft() max value.

you can see here: http://jsfiddle.net/eprwz/16/

it appears going on li.offset().left tracking position relative document when need relative parent ul element. can't minus parent offest due overflow. idea on how calculate this?

note: scroll specific element not end of ul.

change to:

ul.stop().animate({     scrollleft: li.position().left + ul.scrollleft()  }, 2000); 

you looking position() method, returns relative position, instead of offset, returns absolute (more proper - relative document) position, , add current scroll state (which affects position reading)