查询了网上前辈的解决方法,总结了自己处理方法:监控跳转事件中保存相对于body的位置,再保存点击的商品相对于父类的位置,再保存商品列表信息;从商品详情页返回后,检测是否保存过商品列表信息,有就加载保存的商品列表信息不调用ajax,并且对父类定位,对父类中的商品子元素定位;然后清除保存的信息。
个人专业词汇和文章水平有限,看不明白的直接看代码自己理解吧。
html结构
<!-- 整个商品列表模块 -->
<div class="more-things" >
<div class="more-title">
<div class="main-title">
<!-- 标题 -->
<span>更多</span><span class="highlight">好物</span>
</div>
<div class="sub-title">MORE GOOD THINGS</div>
</div>
<div>
<!-- tab分类 -->
<ul class="more-tab">
<li class="active">
商城自营
</li>
<li>
会员分享
</li>
</ul>
<div class="more-pane">
<div class="pane pane1 active">
<ul>
<!--ajax加载的商品列表 active 表示处于活跃状态-->
</ul>
</div>
<div class="pane pane2">
<ul>
<!--ajax加载的商品列表-->
</ul>
</div>
</div>
</div>
</div>
ja //监听页面跳转,意思是监听在元素more-things下的a的点击事件
$(".more-things").on("click", "a", function () {
//处理兼容,distance为body滑动的位置;
var distance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
//height_list 是查看的商品在可以滑动的父类 .active中滑动距离父类顶部的位置
var height_list=$(".more-pane .active").scrollTop();
//设置缓存,记录到顶部的距离,页面关闭时,sessionStorage被清除
sessionStorage.setItem("distance", distance);
sessionStorage.setItem("height_list", height_list);
//记录商品列表的信息,可酌情保存,在这里保存了整个商品列表模块的信息,因为商品列表模块有个tab可以切换,为了方便不去记录哪个tab处于active状态,就整个保存了
sessionStorage.setItem("more_things", $(".more-things").html());
})
function ajaxEvent(){
//获取保存的商品列表的信息
var more_things = sessionStorage.getItem("more_things");
if(more_things!=null){
//加载保存的商品列表的信息
$(".more-things").html(more_things);
var height_list=sessionStorage.getItem("height_list");
var dis = sessionStorage.getItem("distance");
if(dis!=null){
//定位到在body中位置
$("html,body").animate({ scrollTop: dis }, "fast");
}
sessionStorage.removeItem('distance');
if(height_list !=null){
//定位到在可滑动的父类中的位置
$(".more-pane .active").animate({ scrollTop: height_list }, "fast");
sessionStorage.removeItem('height_list');
}
//删除保存的信息
sessionStorage.removeItem('more_things');
}else {
$.ajax({
//加载商品列表数据
})
}
}