jquery实现移动端数据列表返回原来位置

项目需求：点击进入详情页面，再点击返回按钮，返回到原来的位置。

数据列表图：



备注：数据列表查询用的是ajax,可以通过上拉加载下一页数据。

我先简单说一下思路：

1.首先应该获取到列表页面已经加载好的数据，将数据存入缓存中。

2.得到当前滚动条距顶部的位置。

3.当前加载到的分页页面的当前页。

接下来是详细步骤：

1.获取滚动条距离顶部的高度。

/**
* 获取滚动条距离顶端的距离
* @return {}支持IE6
*/
function getScrollTop() {
var scrollPos;
if (window.pageYOffset) {
scrollPos = window.pageYOffset; }
else if (document.compatMode && document.compatMode != 'BackCompat')
{ scrollPos = document.documentElement.scrollTop; }
else if (document.body) { scrollPos = document.body.scrollTop; }
return scrollPos;
}

2.将当前加载的数据存入sessionStorage。

点击sessionStorage详细讲解，我在这就不多说了。

//数据列表存储页面
<ul id="scroller" class="datalist"></ul>
//获取已加载数据
var datalistHtml = $("#scroller").html();
//存入sessionStorage中
sessionStorage.setItem("datalistHtml", datalistHtml);

3.点击进入详情页面按钮，传入数据id、当前页和滚动条高度。（当然你当前页和滚动条高度你也可以放入cookie中）

//查看详情
function queryDetail(recordId){
var scrollPos = getScrollTop();
var datalistHtml = $("#scroller").html();
sessionStorage.setItem("datalistHtml", datalistHtml);
window.location.href="/page/mySportpResult?id="+recordId+"&pageCurrent="+queryPage+"&scrollPos="+scrollPos;
}

4.在详情页面点击返回列表页面

//返回列表页面
function goHistory(){
var pageCurrent = getQueryString("pageCurrent");
var scrollPos = getQueryString("scrollPos");
var token = $.cookie('token');
window.location.href="/page/index？  pageCurrent="+pageCurrent+"&scrollPos="+scrollPos+"&token="+token;
}
注：当前页的获取我就不多说了，不懂得同学再私密我。
//获取url参数方法
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}

5.根据滚动条高度判断是否是新进入页面还是从详情页面返回。

var pageCurrent;
//从url获取滚动条高度
pageCurrent = getQueryString("pageCurrent");
//判断是否为空
if(pageCurrent == null || pageCurrent == ""){
pageCurrent = 1;
loadAll(token,pageCurrent);
}else{
queryRecord(token,pageCurrent);
}

6.点击返回，列表页面初始化方法

//如果滚动条高度存在，走该方法。
function queryRecord(token,pageCurrent){
//从sessionStorage取得缓存数据
var value = sessionStorage.getItem("datalistHtml");
//放入列表中
$(".datalist").append(value);
//拿到滚动条高度
var scrollPos = getQueryString("scrollPos");
//清空缓存数据
sessionStorage.clear();
//设置高度
window.scrollTo(0,scrollPos);
//执行查询方法
loadAll(token,pageCurrent);
}

7.查询方法

//这块查询主要是ajax查询，通过分页来控制上拉加载更多数据
//初始化查询
function loadAll(token,pageCurrent){
$('#wrapper').dropload({
scrollArea : window,
loadDownFn : function(me){
queryPage =  pageCurrent+1 ;
//传入当前页和每页显示条数
var jsonData = '{"pageNo":"'+ pageCurrent++ +'","pageSize":"10"}';
$.ajax({
type: 'POST',
async: false,
headers: {'token':token},
url: '/history',
data:jsonData,
dataType:'json',
success: function(result) {
var data = result.value;
if(data != null && data != ""){
//具体拼接字符串我就不展示了。
}else{
// 锁定
me.lock();
// 无数据
me.noData();
}
// 为了测试，延迟1秒加载
setTimeout(function(){
// 插入数据到页面，放到最后面
$('.datalist').append(strlist);
// 每次数据插入，必须重置
me.resetload();
},1000);
}
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
//即使加载出错，也得重置
me.resetload();
}
});
}
});
}

这是上拉加载更多的链接，有需要的同学可以看一下:http://www.jq22.com/jquery-info6960。

有什么问题可以跟我留言和评论，大家互相学习。