Question

在我的Jquery Mobile网站上我正在使用href作为后退按钮;

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

但如果我在第一页上滚动，则后退按钮会再次跳回到顶部。第一页不会保持相同的位置。

有没有解决方案？

Answer 1

解决方案

我遇到了这个问题，我使用iSroll

修复了这个问题

从PageA转到PageB时，将PageA的滚动位置保存在变量中。

执行此操作修改iscroll.js并在scrollTo下添加getScrollY方法，如下所示

        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;

        },

现在保存页面更改前的当前位置

curScrollPos = myScroll.getScrollY();

在返回到PageA时设置滚动位置，我在PageB的Pagehide事件中执行此操作

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

这样我解决了我的问题，希望这会有所帮助。

iScroll及其jQuery Mobile派生iScrollview

iScroll主页：http://cubiq.org/iscroll-4

iScrollview主页：https://github.com/watusi/jquery-mobile-iscrollview

iScroll是一个javascript，可以在Web浏览器中的窗口中滚动内容，其行为与iPhone和Android等移动设备上的原生滚动非常相似。这意味着您可以使用类似本机的滚动条和物理滚动浏览器中的窗口。

这也是我们当前问题的解决方案。由于iScroll实现页面将占据页面高度的100％，无论列表视图滚动多远。这也是为什么返回列表视图仍然会保持在同一位置的原因。

当然，如果您想要实现此解决方案，您应该选择iScrollview实现。你仍然可以实现iScroll，但这会花费你更多的时间。

无声滚动

官方文件：http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html

这个jQuery Mobile功能也是我们首先遇到这个问题的原因。在触发页面转换之前，原始页面将以静默方式滚动到顶部。

在我们的例子中，当选择listview时，必须记住它的位置（这里你会发现在页面转换期间存储数据/参数的解决方案，只需搜索章节：页面转换之间的数据/参数操作）变化。在这种情况下，当我们返回上一页时，我们可以使用pagebefpreshow事件在显示页面之前静默滚动到底部。

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

这是静音滚动的一个有效例子：http://jsfiddle.net/Gajotres/2xfrM/

以下是使用大型列表视图和多个页面的真实生活jsFiddle示例：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
}

不幸的是，在您的示例中，此解决方案仅适用于pageshow。由于jQM架构，只能在pageshow事件期间执行此操作。

最后的笔记

如果您想了解有关iScroll + iScrollView的更多信息，以及它们如何使用工作示例，请查看 article 。

Answer 4

我在这里找到了一个解决方案：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));

Jquery Mobile返回按钮滚动到顶部

4 个答案:

解决方案

更多信息

iScroll及其jQuery Mobile派生iScrollview

无声滚动

最后的笔记