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);
});

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

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