商城首页商品是用ajax动态加载的,并且商品列表父级能单独滚动(overflow-y: scroll);点击商品后返回首页需要定位到原来浏览的位置,并且数据不能有变化。
查询了网上前辈的解决方法,总结了自己处理方法:监控跳转事件中保存相对于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>javascript代码 //监听页面跳转,意思是监听在元素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({
//加载商品列表数据
})
}
}

评论() 相关

收藏

赞

yeshen144

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。