ajax加载的链接列表点击跳转后返回重新定位到浏览位置

浏览:278 发布日期:2021/01/07 分类:功能实现 关键字: ajax不重新加载 scrollTop jquery
商城首页商品是用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({
//加载商品列表数据
})
}
}
评论( 相关
后面还有条评论,点击查看>>