无限加载 - 返回到页码和滚动的项目

Question

基本上，我将当前的类别页面从分页更改为无限加载。

一切正常，但我的问题是返回到正确的页面和产品。

这目前是我用于加载产品的 JS

$(document).on('click', '.page-next a', function (e) {
e.preventDefault();
var self = $(this),
loadparent = self.parents('.ajax-load');
setTimeout(function () { $(loadparent).fadeOut(); }, 700);
$('.ajaxLoaderOverlay').addClass('show');
var url = $(this).data('url');
$.ajax({
url: url,
method: 'POST',
dataType: 'html',
success: function (data) {
$('.mid-content').append(data);
$('.ajaxLoaderOverlay').removeClass('show');
}
});
});

我正在使用会话存储跟踪滚动

$(window).scroll(function () {
//set scroll position in session storage
sessionStorage.scrollPos = $(window).scrollTop();
console.log(sessionStorage);
});
var init = function () {
//return scroll position in session storage
$(window).scrollTop(sessionStorage.scrollPos || 0)
};
window.onload = init;

这些工作正常，但是当加载第二页时，窗口只是滚动到第一页的底部，永远不会加载正确的页面。

我知道我可能需要捕获页码，但有点不确定如何做到这一点。

任何建议或建议都会很棒

提前非常感谢！

Answer 1

您可以使用JSON.stringify保存整个对象并使用JSON.parse检索信息，而不是将单个页面的滚动保存为标量。 您只需要以某种方式记住当前页面(我在代码的注释中添加了一些建议(。

/*
Retrive currentPage either from
- url
- session
- global variabile (if you are using ajax - see also pjax to push state)
*/
currentPage = 0;    // to be changed
$(window).scroll(function () {
var scrollPages = JSON.parse(sessionStorage.scrollPages);
scrollPages = typeof scrollPages === "object" ? scrollPages : {};
var scrollPos = $(window).scrollTop();
scrollPages[currentPage] = scrollPos;
//set scroll pages position in session storage
sessionStorage.setItem('scrollPages', JSON.stringify(scrollPages));
console.log(sessionStorage);
});
var init = function () {
//return scroll position in session storage
var scrollPages = JSON.parse(sessionStorage.scrollPages);
scrollPages = typeof scrollPages === "object" ? scrollPages : {};
$(window).scrollTop(scrollPages[currentPage] || 0)
};
window.onload = init;