解决方案

以下是一个有效的例子：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
}

简介

在我描述您需要了解的其他解决方案之前，这不是错误，也不是一个完美的解决方案。问题是，为了设置转换到另一个页面的动画，视口必须位于页面的顶部，以便当前页面和转换的页面垂直排列。

如果你在一个页面上的长列表中间（比如说1000px）并且你要转移到的页面只有几百个像素高，那么当前页面会在屏幕上正常显示动画，但新页面不会在视口上方可见。

有两种真正可行的解决方案：

1。 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，但这会花费你更多的时间。

2。无声滚动

就像我的顶级例子一样：

官方文件：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/

更多信息

如果您想了解有关此主题的更多信息，请查看此 article ，您还可以找到有效的示例。

Answer 2

Gajotres有很好的答案，我只是用这种方式（我用saveScrollTop类标记了页面，在必要的地方）：

$(document).on('pageshow',function(){
    if ($.mobile.activePage.hasClass('saveScrollTop')
        && $.mobile.activePage.data('scroll')){
        $.mobile.silentScroll($.mobile.activePage.data('scroll'));
    } else {
        $.mobile.silentScroll(0);
    }
});

$(document).on('pagebeforechange',function(){
    if ($.mobile.activePage && $.mobile.activePage.hasClass('saveScrollTop')){
        $.mobile.activePage.data('scroll',$(window).scrollTop());
    }
});

不幸的是，jQuery滚动窗口而不是页面div内的内容，这就是问题的根源。它保存最后滚动的位置并将其设置在下一页中。如果您不在新页面上滚动并返回，它可以正常工作。但如果两个页面都比屏幕大，那就完全搞乱了。

Answer 3

您可以使用jQuery mobile中的.offset()跟踪位置。您可以将值保存到sessionStorage，当用户返回页面时，从sessionStorage检索值并执行silentScroll。

保存如下

sessionStorage.pixelFromTop = $("#ordSrcCnt").offset();

并在用户返回后滚动如下

$.mobile.silentScroll(parseInt(sessionStorage.scrollToOrderRow));

希望这足以让你开始。

Answer 4

如上所述，对我有用的是：

$(document).on("pageshow","#page",function (event) {
if (Listnumber>0)$.mobile.silentScroll($("#"+listnumber).offset().top-50);
});

我有一个动态生成的listview（来自xml文件），每个li-item都有一个id。我将id放在var listnumber中，这样当我点击listview查看详细信息页面后，当我返回listview页面时，我可以检索它。在第一次访问listviewpage时，listnumer var为0，因此它不会进行任何滚动。我在偏移后做-50，所以我滚动到我点击的列表项，否则列表项将不可见。我花了几个小时来搞清楚......

Answer 5

这是修复它的最佳方法。

将其放在页眉中：

<script>
  $(function() { 
    $.mobile.defaultHomeScroll = 0;
  });
</script>

这种方式直到永远不会滚动到顶部。

使用jQuery Mobile 1.3列表视图保存滚动位置

5 个答案:

解决方案

简介

1。 iScroll及其jQuery Mobile派生iScrollview

2。无声滚动

更多信息