I need to update the scrollbar location on a table of contents div within a series of jquery mobile data role pages.

So I have a table of contents with 11 links on the left that link to different data role pages. When each new data role page is loaded, I can update the active state of each link with css, but I can't scroll down the table of contents list as the user clicks through the table of contents. Is there any way to do this dynamically?

My header:

<script src="js/jquery-1.6.4.min.js"></script> 

<script src="js/jquery.mobile-1.0rc1.min.js"></script> 

<script> $(document).live('pageinit','[data-role=page]', function() {

 $("#toc_contentdown").scrollTop(200); }); </script>

is supposed to update each data role page by scrolling down to a location in my table of contents div. You can view my demo page here: demo page

I am using jquery 1.6.4 and jquerymobile 1.0

This question was helpful in giving me ideas of how to initialize the jquery within the data role page: How to initialize pages in jquery mobile? pageinit not firing

so that gave me the idea to embed the jquery initializing code into each data role page:

<script> $("#chp11").live('pageinit', function() { 

$("div#toc_contentdown").scrollTop(200); }); </script>

where #toc_contentdown is the div I want the scrollbar to scroll down when the data role page is loaded. and #chp11 is the id of the data role page that should be currently loaded to initialize the scroll down.

Any ideas? I'm sure there's an easier way to do this that I'm not thinking of at the moment. I'm using $(document).live('pageinit' instead of '.bind' because I am using 1.6.

I would post the code of the full page, but it's just several similar data role pages .

Thanks in advance for any guidance!