CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Vikram Anand Bhushan
Vikram Anand Bhushan

Reputation: 4886

how to save the offset of current scroll position for Jquery Mobile page

I am trying to save the offset of the current value of the page in a global variable and trying to use it for scrolling back to the same position when page is reloaded .

Here is my code 

<script>
$(document).on("pagebeforeshow", '#outerPage', function(){
    $(document).on('vclick','#outerPage',function(e){
   //alert('yo i am clickable now'); 

    var parentOffset = $(this).parent().offset(); 
   //or $(this).offset(); if you really just want the current element's offset
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;
   storePosition.topCoordinate = relY;   
});
    var  positionY = storePosition.topCoordinate ;     
    if(positionY !== null) {

        setTimeout(function () {
        $.mobile.defaultHomeScroll = positionY;
    }, 10); 
    }
});

var storePosition = {
    topCoordinate : null
}
</script>

Here I am trying to store the offset in storePosition.topCoordinate then use it in the function to set the page scroll . but my variable is always set to null I dont understand why this is happening .

UPDATE

For now I am using the a script something like this 

$(document).on('pageinit', '#outerPage', function () {
    $('a').on('vclick', function () {
        console.log('its done Boy');
        localStorage.setItem('scrolls', 0);

    });

});

/*$(window).on('unload', function() {
    console.log(window.location.pathname);
    console.log(window.location.pathname);
    console.log( "Bye now!" );
})*/

$(document).on('pageinit', '#outerPage', function () {
    $(document).on("scrollstop", function () {
        var parentOffset = $(this).parent().offset();
        var relY = window.scrollY;
        localStorage.setItem('scrolls', relY);
        console.log(localStorage.getItem("scrolls"));
    });

});

$(document).on("pagebeforeshow", '#outerPage', function () {
    var positionY = localStorage.getItem("scrolls");
    if (positionY != null) {
        $.mobile.defaultHomeScroll = positionY;
    }
});

So I am saving the value in a localStorage and clearing it up when I change page like when I click on link tag I know this is not the right solution :P. I was trying to use .unload() but it was not clearing the LocalStorage event when the same page was refreshed

Please help me out with this

Thanks & Regards

Upvotes: 2

Views: 2674

Answers (1)

Tasos
Tasos

Reputation: 5361

On one of my projects i use this code to remember the last scrolled position on a page.

Demo (just scroll on the list, got to page 2 and come back)

http://jsfiddle.net/ukzuvtyh/

Jquery code for remmebring last position

var storePosition = {     /// initializing the storeposition
    topCoordinate : null
}


 storePosition.topCoordinate =  $(this).offset().top;   /// storing the position


if(storePosition.topCoordinate !== 0) {   // if we are at the top no point doing anything

 $("html, body").animate({"scrollTop":  storePosition.topCoordinate}, 500);

 }

If you see that on some pages when you go back the scroll to the last position is off by some pixels subtract or add to get the exact position. It will be ok after that. You will need to judge a little before the right amount. - 60 indigates 60 pixels minus on the scroll. I had this issue, don't know why so its a fix

$("html, body").animate({"scrollTop":  storePosition.topCoordinate - 60}, 500);

Upvotes: 3

Related Questions