javascript - Jquery Mobile go back button scrolls to top

Question

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?

Answer 1

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.