手机版网页，上拉加载数据，需要进入详情页后，点击返回，能定位原来进入时的位置。jQuery原生代码编写功能。
列表页，主要功能都在这个页面。大家可以根据自己的实际情况，对代码进行微调。大致的思路是一样的。
<!DOCTYPE html>
<html>
<head>
<title>商品列表</title>
<style>
.item { padding: 20px; border-bottom: 1px solid #ccc; }
.loading { text-align: center; padding: 20px; display: none; }
</style>
</head>
<body>
<div id="product-list">
<!-- 动态加载的内容会放在这里 -->
</div>
<div id="loading" class="loading">加载中...</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
let page = 1, //分页码
isLoading = false, //分页开关(滚动加载方法 1 中用的)
dom = null;//保存点击详情页的时候的HTML代码
// 1、点击商品项，进入详情页时，保存已加载的数据，滚动位置，加载页码。
$(document).on('click', '.item', function() {
//这个可以有可无，看具体需求
const productId = $(this).data('id');
//获取已经加载的列表数据
var htmlContent = $('#product-list').html();
//保存已经加载的列表数据
sessionStorage.setItem('dom', htmlContent);
// 保存当前滚动位置
sessionStorage.setItem('listScrollPosition', $(window).scrollTop());
// 新窗口打开详情页，如果是a链接，这个可以不要。
window.open(`detail.html?id=${productId}`, '_blank');
});
//3、从详情页返回后，sessionStorage恢复滚动位置
const savedPosition = sessionStorage.getItem('listScrollPosition');
if (savedPosition) {
setTimeout(() => {
//获取之前的列表数据
dom = sessionStorage.getItem('dom');
//加入到列表中
$('#product-list').append(dom);
//之前的页码
page = sessionStorage.getItem('page');
//恢复之前的保存位置
window.scrollTo(0, parseInt(savedPosition));
//数据打印
console.log("listScrollPosition",savedPosition);
console.log("page",page);
console.log("dom",dom);
//清除sessionStorage的数据
sessionStorage.removeItem('listScrollPosition');
sessionStorage.removeItem('page');
sessionStorage.removeItem('dom');
}, 100);
}else{
// 初始加载
loadMore();
}
// 上拉加载更多数据
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() > $(document).height() - 100 && !isLoading) {
loadMore();
}
});
function loadMore() {
isLoading = true;
$('#loading').show();
// 模拟AJAX加载数据
setTimeout(function() {
let html = '';
for (let i = 0; i < 10; i++) {
const id = (page - 1) * 10 + i + 1;
html += `
<div class="item" data-id="${id}">
<h3>商品 ${id}</h3>
<p>这是商品 ${id} 的简介...</p>
</div>
`;
}
$('#product-list').append(html);
page++;
//2、保存加载的页码
sessionStorage.setItem('page', page);
isLoading = false;
$('#loading').hide();
}, 800);
}
});
</script>
</body>
</html>
详情页，随便写一个就好，这个功能跟详情页没有多大关系。
<!DOCTYPE html>
<html>
<head>
<title>商品详情</title>
</head>
<body>
<div id="product-detail">
<h1 id="product-title"></h1>
<p id="product-description"></p>
<button id="back-button">返回列表</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
const urlParams = new URLSearchParams(window.location.search);
const productId = urlParams.get('id');
// 模拟加载商品详情
$('#product-title').text(`商品 ${productId} 详情`);
$('#product-description').text(`这是商品 ${productId} 的详细描述内容...`.repeat(10));
// 返回按钮点击事件
$('#back-button').click(function() {
// 直接关闭当前窗口，返回列表页
window.close();
});
});
</script>
</body>
</html>
