javascriptjqueryjquery-mobileiscrolliscrollview

Jquery Mobile go back button scrolls to top


In my Jquery Mobile website I am using href for back button like;

 <a id='{0}' class='{1}' href='/' data-role=""button"" data-icon=""arrow-l"" data-transition=""slide"" data-direction=""reverse"">

but if I have scroll on first page, back button jumps back to top again. First page does not stay on same position.

Is there any solution for this?


Solution

  • Solution

    I had this issue i fixed it using iSroll

    While going from PageA to PageB save the scroll position of PageA in a variable.

    to do this modify the iscroll.js and add getScrollY method under scrollTo like this

            scrollTo : function(x, y, time, relative) {
                var that = this, step = x, i, l;
    
                that.stop();
    
                if (!step.length)
                    step = [{
                        x : x,
                        y : y,
                        time : time,
                        relative : relative
                    }];
    
                for ( i = 0, l = step.length; i < l; i++) {
                    if (step[i].relative) {
                        step[i].x = that.x - step[i].x;
                        step[i].y = that.y - step[i].y;
                    }
                    that.steps.push({
                        x : step[i].x,
                        y : step[i].y,
                        time : step[i].time || 0
                    });
                }
    
                that._startAni();
            },
            getScrollY : function() {
    
                var that = this;
    
                return that.y;
    
            },
    

    Now save the current position before page change like this

    curScrollPos = myScroll.getScrollY();
    

    And set the scroll position while going back to that PageA, i am doing this on pagehide event of PageB

    myScroll.scrollTo(0, curScrollPos, 1);
    myScroll.refresh();
    

    This way i solved my issue, hope this helps.

    More info

    If you want to find out more about this topic take a look at this article, you will also find working examples.