目的
你有没有被一个尴尬的问题困扰过，在微信中浏览商品列表的时候滑到了一个中间的位置，点击了某一个详情，可是从详情页返回之后发现列表又从第一个开始了，不得不滑回到原来的位置才能继续浏览。
这是一个在微信中特有的问题，用手机自带的浏览器打开同样的页面并不会出现同样的情况。经过我测试，有部分大型网站也存在这个问题，其原因可能是微信端对页面的缓存做了某些限制。
思路
先用COOKIE记录上一个页面滑动的高度，返回之后用JS再滑回去
方案
下载js.cookie.js然后引入到项目中
需要用到这个JS库的几个方法：
- Cookies.set(paramName, paramValue)，设置cookie
- Cookies.get(paramName)，获取cookie
- Cookies.remove(paramName)，删除cookie
监听整个页面的滑动事件
$(document).ready(function(){
var _scrollTop = Cookies.get('scrollTop_0'); //获取cookie中的页面高度
while ($(document).height() <= _scrollTop){ //如果当前页面高度小余要求达到的高度则调取一次数据
getData();
}
$(document).scrollTop(_scrollTop); //当前页面设置到cookie中的高度
Cookies.remove('scrollTop_0'); //移除cookie
});
加载完页面之后执行以下方法
$(window).scroll(function() { //监听整个页面滑动的事件
var _scrollTop = $(document).scrollTop();
Cookies.set('scrollTop_0', _scrollTop); //每次滑动都记录当前高度到cookie中
if (_scrollTop >= $(document).height() - $(window).height()) { //判断滑动到底部拉取一次数据
getData();
}
});
上面的代码中，有一句while语句，它的作用是不停的异步拉取数据把页面总高度撑起来，直到整个页面的高度大于你离开这个列表页时候的高度，然后再用JS滑到之前的位置，最后删除COOKIE。
由于用到了迭代，每一次条件判断都需要等当前轮次的数据读取完成之后，它的执行才有效。所以异步获取数据的AJAX也要增加一个参数async:false，让AJAX不那么“异步”。
这样，当你返回的时候就会自动回到原来浏览的地方了，实际用起来并没有什么延迟感，是不是感觉特别爽呢？
如果你的页面上没有用到异步分页的话，这里还有个简易版的
$(document).ready(function(){
$(document).scrollTop(Cookies.get('scrollTop_0'));
Cookies.remove('scrollTop_0'); //移除cookie
$(window).scroll(function(){Cookies.set('scrollTop_0', $(document).scrollTop())});
});
每个列表页之间的 cookie 会相互影响，此时需要给每个页面设置单独的 cookie 的 key
结尾
如果你正好被这个问题困扰，希望能对你有帮助！
以上内容为作者原创，特此声明，如需转载，请征得作者同意
