Animating an arrow that points to based on position on the screen

Animating an arrow that points to based on position on the screen

I not very familiar with html, css and javascript
I am using twitter bootstrap, I'd like to have a section indicator in a
long page that shows the relative position of the current view relative to
the entire ver long scrollable page.
The sample of what I want to achieve is in:
http://global.tommy.com/int/en/Collections/start
I managed to do that with <ul> <li>, however, I'd also like to animate the
arrow movement from one <li> to the next <li> as the user scroll up and
down within the page. I managed to scope out the code for the <ul> <li>
but have no idea how to animate the movement... could anyone help me point
to the specific animation part or recommend some javascript or css library
for that? Probably I missed twitter-bootstrap elements too, however I did
not find any so far... Thanks!