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

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.

Answer 2

why don't you directly add data-rel="back" on the anchor tag and set href="#" instead ?

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

Answer 3

Before I describe your available solutions you need to understand, this is not an error nor is there a perfect solution. The issue is that to animate the transition to another page the viewport has to be at the top of the page so that the current page and the page transitioning in are vertically lined-up.

If you were half-way down a long list on one page (say 1000px) and the page you are transferring to is only a few hundred pixels tall then the current page would animate off the screen properly but the new page would not be visible as it would be above the viewport.

There are 2 viable solutions:

iScroll and its jQuery Mobile derivate iScrollview

iScroll homepage: http://cubiq.org/iscroll-4

iScrollview homepage: https://github.com/watusi/jquery-mobile-iscrollview

iScroll is a javascript that can scroll content in a window within a web browser with very similar behaviour to native scrolling on mobile devices such as iPhone and Android. This means you can scroll a window within the browser using native-like scrollbars and physics.

That is also a solution for our current problem. Because of iScroll implementation pages will occupy 100% of page height, no matter how far listview is scrolled. This is also a reason why on return listview will still stay at a same position.

Of course in case you want to implement this solution you should pick iScrollview implementation. You would still be able to implement iScroll, but it would take you much more time.

Silent scroll

Official documentation: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

This jQuery Mobile functionality is also the same reason why we have this problem at the first place. Before a page transition is triggered original page is silently scrolled to the top.

In our case, when listview is selected, its position must be remembered (here you will find solutions of data/parameteres storing during the page transition, just search for the chapter: Data/Parameters manipulation between page transitions) before page is changes. In that case, when we return to the previous page we could use pagebefpreshow event to silently scroll to the bottom before page is shown.

//scroll to Y 100px
$.mobile.silentScroll(100);

And here's a working example of silent scroll: http://jsfiddle.net/Gajotres/2xfrM/

And here's a real life jsFiddle example using large listview and several pages: http://jsfiddle.net/Gajotres/5zZzz/

// Detect click on a li element and store its coordinate, change page to another
$(document).on('pagebeforeshow', '#index', function(){  
    $('#test-list li').on('click', function(){   
        storePosition.topCoordinate =  $(this).offset().top;
        $.mobile.changePage('#second');
    });    
});

// If there's a stored position use silentscroll function and scroll to correct location
$(document).on('pageshow', '#index', function(){      
    if(storePosition.topCoordinate !== null) {
        $.mobile.silentScroll(storePosition.topCoordinate);
    }
});

// Store position location
var storePosition = {
    topCoordinate : null
}

Unfortunately like in your example, this solution works only on pageshow. Because of jQM architecture it is only possible to do this during the pageshow event.

Final notes

If you want to find out more about iScroll + iScrollView, how they work with working examples then take a look at this article.

Answer 4

I found a solution here: https://forum.jquery.com/topic/jquery-mobile-scroll-to-top-of-page-on-page-load#14737000005271291

(function($){
      $( document ).on( "mobileinit", function() {
            var silentScroll = $.mobile.silentScroll;
              $.mobile.silentScroll = function( ypos ) {
            if ( $.type( ypos ) !== "number" ) {
               // FIX : prevent auto scroll to top after page load
               return;
            } else {
               silentScroll.apply(this, arguments);
            }
        }
      })
}(jQuery));