Back to last scrolled position - jquery mobile page design

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.

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); 

});