ajax加载列表 当点击进入详细页再次返回列表定位到当前点击位置解决办法
来源:互联网 发布:游族网络定增价格 编辑:程序博客网 时间:2024/03/29 05:32
当我们在加载数据点击更多是,进入详细页面然后在返回列表页还要回来上次浏览的位置。网上也看到好多,都是三严两语。
不多对我的的启发也是很大。再次也多些网友的启发。不多说直接上如何操作。
我的方法主要是 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); })//写cookiesfunction 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=/";}//读取cookiesfunction getCookie(name) { var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); if (arr = document.cookie.match(reg)) return unescape(arr[2]); else return null;}//删除cookiesfunction 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 0
- ajax加载列表 当点击进入详细页再次返回列表定位到当前点击位置解决办法
- h5缓存 和 点击商品列表进入详情页点击返回按钮回到上次打开列表的位置
- listview控件当点击进入一个item后返回,仍然返回到点击item时listview所定位到的位置
- 完整版百度地图点击列表定位到对应位置并有交互动画效果demo
- jquery列表点击加载更多
- 注销返回到登录界面后点击浏览器回退时不能再次进入原页面的方法
- PHP Ajax动态列表的后退操作——保存列表内容和点击位置
- 织梦dedecms首页列表页ajax点击下拉加载更多文章瀑布流效果
- webView 无限进入,点击返回,返回到网页的上一个页面,当无返回时,返回到自己的页面
- android仿酷狗歌曲列表界面点击右侧字母定位到该字母的集合列表
- 微信联系人列表点击侧边栏首字母定位到相应联系人列表的实现方法
- 微信联系人列表点击侧边栏首字母定位到相应联系人列表的实现方法
- 点击页面某一位置或区域,让当前页面定位到某一位置
- 百度API 定位 返回当前详细位置
- android 监听当前页返回键回到桌面,再次点击app回到当前页
- ios7点击statusBar返回列表顶部
- ios7点击statusBar返回列表顶部
- ios7点击statusBar返回列表顶部
- 1001. A+B Format (20)
- iOS- UICollectionView实现表情数据横排横滚动
- 正则表达式
- 小奇挖矿 Explo
- 线段树模板
- ajax加载列表 当点击进入详细页再次返回列表定位到当前点击位置解决办法
- CentOS 6.2 SVN搭建 (YUM安装)
- Git中查看某个文件基于时间改动的具体详情
- Android优秀三方框架
- 安装git,获取.ssh\id_rsa.pub
- Java类及其类成员的初始化(一)—类的初始化
- The Tomcat server configuration at \Servers\Tomcat v7.0 Server at localhost-config is missing. Check
- MVC(六、ActionResult 返回类型 )
- [Leetcode] #96 Unique Binary Search Trees