ajax加载数据 返回列表 记住原位置,ajax加载列表 当点击进入详细页再次返回列表定位到当前点击位置解决办法...

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

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

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

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

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

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

ProjectListAjaxData = ProjectListAjaxData + data;

sessionStorage.setItem("ProjectListAjaxData",ProjectListAjaxData);

2、@R_953_404@面时，记录页面滚动距离顶部的位置。(请看下边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

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

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);

}

}

});

});

});

$(document).ready(function () {

//点击@R_953_404@面记录滚动距离cookie

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

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

});

});

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

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

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

//$.cookie(str,{ 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=/";

}

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。