How to implement back button to dynamically generated html?

Question

I have single page application. All data is retrieved by ajax and rendered on client. I have the next workflow:

1. User opens list of items. List has infinity scroll
2. User scrolls and clicks on item
3. System makes ajax request, generates new html and replaces previous content
4. User clicks on browser's back button
5. System changes url (historyjs) and router loads items and renders list. But the position of scroll is LOST ! So user needs to scroll to go to the previous position on the list.

How to preserve this position during back / next actions and implement generic solution for all project ?

Answer 1

Going back on Browser button returns you to a "Cached" page more often then not. If not cached, then it will re-render the page. Obviously given the nature of HTTP state is lost. My suggestion would be to store the number of the item in the list, or the items value in "Session" variable or "Cache" object and access it from there before Page Load.

If the Session["lastSelectedItem"] != null, then get the value/number, and use jQuery or whatever to set the "Selector" on the right place.

Answer 2

Just add to list id and scroll to this id

<div id="item_1002">content of 1002</div>
<div id="item_1003">content of 1003</div>
<div id="item_1004">
    <span>content of 1004</span>
    <a href="#item_1002">goto 1002</a>
</div>

this will work even wo js :)

User click on link, go to post with id (if it avaliable on current page) and have location like http://site.com/#item_1002. And when user click back browser change url to http://site.com/#item_1004 and scroll to <div id="item_1004">...

---

EDIT

I'm sure this not work but just as concept its better than my bad English

<script type="text/javascript">
    // scroll to id
    // http://stackoverflow.com/questions/68165/javascript-to-scroll-long-page-to-div

    // need to use this
    // History.Adapter.bind(element,event,callback);
    // but I'm stuck how it works
    // so jQ
    $(document).ready(function(){
        $('a').click(function(){
            // document.getElementById('youridhere').scrollIntoView();
            $(this).scrollIntoView();
            History.pushState({}, 'title', '#item_ID');
        })


        // Bind to StateChange Event
        // Note: We are using statechange instead of popstate
        History.Adapter.bind(window,'statechange',function(){
            // Note: We are using History.getState() instead of event.state
            var State = History.getState();

            $(State.url).scrollIntoView();
        });
    })



</script>

<div id="item_1002">content of 1002</div>
<div id="item_1003">content of 1003</div>
<div id="item_1004">
    <span>content of 1004</span>
    <a href="javascript:">goto 1002</a>
</div>