Ajax返回列表定位到之前浏览的位置

2020-01-05 浏览:63
Ajax返回列表定位到之前浏览的位置
评论:(0)复制地址

方法参考自网络,未经测试!!

当我们在加载数据点击更多是,进入详细页面然后在返回列表页还要回来上次浏览的位置。网上也看到好多,都是三严两语。

不多对我的的启发也是很大。再次也多些网友的启发。不多说直接上如何操作。

我的方法主要是 cookie 结合 sessionStorage来完成。


1、sessionStorage 存储ajax加载的html数据                        

//加载更多是保存SessionStorage(浏览项目异步加载的数据)

在js中声明全局变量 var ProjectListAjaxData=‘’用来存储ajax加载数据 ”;(请看下面加载更多)

                            ProjectListAjaxData = ProjectListAjaxData + data;

                            sessionStorage.setItem("ProjectListAjaxData", ProjectListAjaxData);


2、跳转页面时,记录页面滚动距离顶部的位置。(请看下边js)


//页面滚动获取滚动条距离顶部的距离

            $(".page-content").on('scroll', function (event) {

                temscrolltop = $(event.target).scrollTop();

                //$.cookie(str, top, { path: '/' });

                //return $.cookie(str);

            })

//跳转详细页面就记录一个(cookie)标记,代表是从详细页跳转。 

$.cookie("ProjectListPosition", "position", { path: '/' });


 //引用cookie的js

<script src="/_static/JS/jquery.cookies.1.4.1.min.js?v=<%=Common.SysConfig.JsVersion %>"

        type="text/javascript"></script>

 

<script type="text/javascript">

//声明当前列表页面距离顶部的高度

        var temscrolltop = 0;

        var str = "ProjectListscrollTop";//定义距离顶部的高度存储Cookie的名字

//获取保存好的Ajax加载的数据,如果不存在,赋值为空

        var ProjectListAjaxData = sessionStorage.getItem("ProjectListAjaxData");

        if (ProjectListAjaxData == null) {

            ProjectListAjaxData = "";

        }

 

 

        $(document).ready(function () {

            //判断返回的页面是不是详细页面

            if ($.cookie("ProjectListPosition")) {

                //使用完马上删除

                delCookie("ProjectListPosition");

                //页面回跳插入ajax加载 data 

                if (ProjectListAjaxData != null && ProjectListAjaxData != "") {

                    $(".comment-list").append(ProjectListAjaxData);

                }

                else {

                    ProjectListAjaxData = "";

                }

 

 

                //页面回跳页码重新赋值为最后翻页的页码

                if ($.cookie("ProjectListPageIndex")) {

                    $(".h_pageindex").attr("pi-status", $.cookie("ProjectListPageIndex"));

                }

                //页面回跳跳转的位置

                if ($.cookie(str)) {

                    $(".page-content").animate({ scrollTop: $.cookie(str) }, 0);

                }

                else {

                }

            }

            else {

                delCookie("ProjectListPosition");

                delCookie("ProjectListPageIndex");

                delCookie("ProjectListscrollTop");

                //清除缓存页面数据session

                ProjectListAjaxData = "";

                sessionStorage.removeItem("ProjectListAjaxData");

            }

            

   //点击加载更多进行分页

            $(".content-more").click(function () {

                if ($(this).attr("data-status") == "1") {

                    return;

                }

 

 

                var pageindex = $(".h_pageindex").attr("pi-status");

                pageindex++;

                $(".content-more").html("加载中");

                $.ajax({

                    type: "get",

                    dataType: "text",

                    url: "/AsynPage/AsynDPProjectList.aspx",

                    data: "type=" + strProjectIndustry + "&prid=" + strPrid + "&siteid=" + strSiteID + "&title=" + strProjectTitle + "&sort=" + strSort + "&pi=" + pageindex,

                    success: function (data) {

                        if (data.replace(/\s/g, '').length == 0) {

                            $(".content-more").html("没有更多");

                            $(".content-more").attr("data-status", "1");

 

 

                        } else {

                            $(".h_pageindex").attr("pi-status", pageindex);

                            $(".comment-list").append(data);

                            $(".content-more").html("查看更多");

 

 

                            //加载更多是保存SessionStorage(浏览项目异步加载的数据)

                            $.cookie("ProjectListPageIndex", pageindex, { path: '/' });//记录翻页的页数

                            ProjectListAjaxData = ProjectListAjaxData + data;

                            sessionStorage.setItem("ProjectListAjaxData", ProjectListAjaxData);

 

 

                        }

                    }

                });

            });   

 

        });

 

 

    </script>


<script type="text/javascript">

            

            $(document).ready(function () {

                //点击跳转页面记录滚动距离cookie

                $(".comment-porject").on('click', function () {

                    $.cookie(str, temscrolltop, { path: '/' });

                });

            });

 

 

            //页面滚动获取滚动条距离顶部的距离

            $(".page-content").on('scroll', function (event) {

                temscrolltop = $(event.target).scrollTop();

                //$.cookie(str, top, { path: '/' });

                //return $.cookie(str);

            })

//写cookies

function setCookie(days, name, value) {

    var exp = new Date();

    exp.setTime(exp.getTime() + days * 24 * 60 * 60 * 1000);

    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + "; path=/";

}

//读取cookies

function getCookie(name) {

    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

    if (arr = document.cookie.match(reg)) return unescape(arr[2]);

    else return null;

}

//删除cookies

function delCookie(name) {

    var exp = new Date();

    exp.setTime(exp.getTime() - 1);

    var cval = getCookie(name);

    if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString() + "; path=/";

}

</script>


评论:(0)复制地址
发布:苗景云 | 分类:IT技术&设计 | Tags:Ajax

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。