ajax加載列表 當點擊進入詳細頁再次返回列表定位到當前點擊位置解決辦法

當我們在加載數據點擊更多是，進入詳細頁面然後在返回列表頁還要回來上次瀏覽的位置。網上也看到好多，都是三嚴兩語。

不多對我的的啓發也是很大。再次也多些網友的啓發。不多說直接上如何操作。

我的方法主要是 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>