Back to last scrolled position - jquery mobile page design

Question

I have a simple one page architecture. In the first page I loaded some list items. Next I scrolled the list and say I reached item 60. Then I clicked the item and it took me to second page.

<div data-role="page" id="home">
    <div data-role="header" data-position="fixed" data-tap-toggle="false"> <a href="#" class="ui-btn ui-btn-left" id="current">0</a>
        <h1>Header</h1>
        <a href="#" class="ui-btn ui-btn-right" id="total">0</a>
    </div>
    <div role="main" class="ui-content">
        <ul data-role="listview" id="list"></ul>
    </div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <h1>Footer</h1>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="header" data-position="fixed" data-tap-toggle="false"> 
        <a href="#home" class="ui-btn ui-btn-left">Back</a>
        <h1>Header</h1>
    </div>
    <div role="main" class="ui-content">
        Some page
    </div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <h1>Footer</h1>
    </div>
</div>

Now when I pressed back button in second page it brings the first page with the list, but scroll position is 0. I wanted it to be position of the 60th item. What I'm missing? How to get back in previous page where I left scrolling?

JsFiddle

Watch the situation by scrolling, then press any button and then press the back button.

Answer 1

When navigating from one page1 to page2 get the scroll position of page1 and when come back form page2 to page1 set the scroll position.

From page 1 to page 2

var scrollPosition= $("div").scrollTop();

and when coming back to page1. Then in page 1 ready function

$(document).ready(function(){  
$("div").scrollTop(scrollPosition); 

});

Answer 2

I don't know about jquery mobile well but As you said you have two pages and after navigating back to the first page you want previous and as we all know that we can't store any data page wise. once if you refresh or reload the page, everything will be reinitialized again. so you have only one way to achieve your goal is that, when you click on list item, get its current scroll position and send that position as query string parameter to another page and store it in one variable there. soon after when user clicks on "back" button you have to again send that variable to first page as query string and on document ready event you will have previous scroll position and you can set that. Thanks