Hi
I am trying to implement a scroll to DIV (i.e. smooth scrolling with some easing) on various events in jPlayer, a javascript audio playlist. Essentially the playlist is in a scrolling DIV with scrollbars and mousewheel scrolling, and when the track changes I would like it to trigger a scroll to the currently playing track, i.e. the new track, such that it is centred vertically in the DIV (which has a variable height).
I thought I would start first with trying to add some code to the #jplayer_next event which usually looks like this:
$("#jplayer_next").click( function() {
playListNext();
$(this).blur();
return false;
});
I came up with the following code to add:
$("#jplayer_playlist").scrollTop($(".jplayer_playlist_current").offset().top);
where #jplayer_playlist is the scrolling DIV and .jplayer_playlist_current is the class of the currently playing track. The code does do something, but I am seeing fairly nonsensical jumping around the div, which does seem somewhat related to the currently playing track, but certainly not what I am looking for.
You can see the playlist here. The currently playing track is highlighted in green, and, when you click on the next button, the DIV certainly isn’t scrolling smoothly to the currently playing track!
If someone could help me amend the code to get this working properly I’d be grateful.
Thanks,
Nick