jQuery Mobile：转换后页面向下滚动

Question

我使用$.mobile.changePage()方法在我的jQuery Mobile网站中从第1页导航到第2页。第1页和第2页都比屏幕大，但第1页比第2页长得多

第1页是很长的项目清单。当用户点击某个项目时，我会通过ajax加载第2页的内容，将该内容附加到正文，然后使用changePage()转换到第2页。

如果用户向下滚动第1页上的列表，然后转到第2页，则窗口向下滚动第2页上的可变数量。我会补充说，第2页上滚动的距离似乎与距离相关用户先前在第1页上滚动。

我尝试过使用$.mobile.silentScroll(0);和$('body').scrollTop('0');，但我没有取得任何成功。

如何防止更改页面方法向下滚动第2页

Answer 1

之前我遇到过同样的问题。你可以做的是创建一个事件处理程序，只要有页面更改，就会调用该事件处理程序并将该函数滚动到页面顶部：

$.mobile.pageContainer.on("pagecontainerchange", function(event, ui) {
    $(document).scrollTop(0);
});

这里的关键区别是在.scrollTop()而不是document上执行body。

在我的代码中，我将这个小例子做得更复杂一些。我记录每个页面的垂直滚动位置，将其存储在页面DOM元素上，并在用户返回页面时恢复垂直滚动位置。这样，用户总是返回到他们离开的地方，而不是总是滚动到页面顶部。