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。
有什么问题可以跟我留言和评论，大家互相学习。