jQuery .scrollTop() not scrolling to li elements as expected

Question

I essentially have an unordered list of list items in a div that doesn't scroll to the next element properly. I'm just trying to have a button to scroll up and down the list.

While the code does scroll, it doesn't match up with the li elements. After every click, it scrolls up a little bit, then down on the next click. I've tried walking the DOM and verifying the element it is scrolling to is an li element, but didn't see the issue.

I have the following jsfiddle: http://jsfiddle.net/YD9s5/9/

The elements are:

• A scrolling div with an id of photos-div
• An unordered list with an id of photos-li (whoops, leaving it for now)
• List items with incrementing ids of photo-li-X where X is a number

The code being used to scroll the div is:

        $('#photos-div').scrollTop($('#photo-li-' + i).offset().top);

The i variable is being incremented, as you can see.

Answer 1

The problem is that .offset() gets the position of an element relative to the entire document, and that position is constantly moving up. So once you've scrolled to item 1, it returns the .offset().top that item 1 currently has in the document, which is now where item 0 used to be.

Add console.log( $('#photo-li-0').offset() ); to the top of your scrollToElement() function and you'll see what I mean. Notice that the top offset keeps decreasing, quickly moving into the negative numbers as it moves off the top of the document.

The fix is to take the difference between the offset of $('#photo-li-'+i) and $('#photo-li-0') (or the container $('#photos-li') itself) and scroll to that instead:

var newpos = $('#photo-li-' + i).offset().top - $('#photo-li-0').offset().top;
$('#photos-div').scrollTop(newpos);

http://jsfiddle.net/mblase75/x4hQP/ (incorporates other improvements)