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