history pushState and scroll position history pushState and scroll position jquery jquery

history pushState and scroll position


I managed to solve this one myself:

We must overwrite the current page on the history stack before navigating to the new page.

This allows us to store the scroll position and then pop it off the stack when we navigate back:

    $('#link').click(function (e) {        //overwrite current entry in history to store the scroll position:        stateData = {            path: window.location.href,            scrollTop: $(window).scrollTop()        };        window.history.replaceState(stateData, 'title', 'page2.html');        //load new page:        stateData = {            path: window.location.href,            scrollTop: 0        };        window.history.pushState(stateData, 'title', 'page2.html');        e.preventDefault();    });


Find a way to make this more dynamic with jQuery, hope this can help :

$(".lienDetail a").on('click',function(){    history.pushState({scrollTop:document.body.scrollTop},document.title,document.location.pathname);}

here the solution without jQuery :

function pushHistory(e){    e = e || window.event;    var target;    target = e.target || e.srcElement;    if (target.className.match(/\blienDetail\b/)){        history.pushState({scrollTop:document.body.scrollTop},document.title,document.location.pathname);    }}if (document.body.addEventListener){        document.body.addEventListener('click',pushHistory,false);}else{    document.body.attachEvent('onclick',pushHistory);}

This will push history state for each click on link with lienDetail class for list of results for example