help needed scrolling to div on event in jPlayer playlist

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开发者_JS百科 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

I cant give you a direct answer, But have you thought of using a JQuery plugin for the schrollbar, it would make it look a bit nicer too.

http://www.kelvinluck.com/assets/jquery/jScrollPane/scrollTo.html

JScrollpane has a "scrollTo" functionallity, I belive it using hash links to define where to scroll to.

I personally like Control.Scrollbar but it uses the Prototype Framework instead of JQuery.