如何让触屏页面在微信中返回时可以保持原高度（位置）

目的

你有没有被一个尴尬的问题困扰过，在微信中浏览商品列表的时候滑到了一个中间的位置，点击了某一个详情，可是从详情页返回之后发现列表又从第一个开始了，不得不滑回到原来的位置才能继续浏览。
这是一个在微信中特有的问题，用手机自带的浏览器打开同样的页面并不会出现同样的情况。经过我测试，有部分大型网站也存在这个问题，其原因可能是微信端对页面的缓存做了某些限制。

思路

先用COOKIE记录上一个页面滑动的高度，返回之后用JS再滑回去

方案

下载js.cookie.js然后引入到项目中

https://github.com/js-cookie/js-cookie

需要用到这个JS库的几个方法：

• Cookies.set(paramName, paramValue)，设置cookie
• Cookies.get(paramName)，获取cookie
• Cookies.remove(paramName)，删除cookie

监听整个页面的滑动事件

$(document).ready(function(){
    var _scrollTop = Cookies.get('scrollTop'); //获取cookie中的页面高度
    while ($(document).height() <= _scrollTop){ //如果当前页面高度小余要求达到的高度则调取一次数据
        getData();
    }
    $(document).scrollTop(_scrollTop); //当前页面设置到cookie中的高度
    Cookies.remove('scrollTop'); //移除cookie
});

加载完页面之后执行以下方法

$(window).scroll(function() { //监听整个页面滑动的事件
    var _scrollTop = $(document).scrollTop();
    Cookies.set('scrollTop', _scrollTop); //每次滑动都记录当前高度到cookie中
    if (_scrollTop >= $(document).height() - $(window).height()) { //判断滑动到底部拉取一次数据
        getData();
    }
});

上面的代码中，有一句while语句，它的作用是不停的异步拉取数据把页面总高度撑起来，直到整个页面的高度大于你离开这个列表页时候的高度，然后再用JS滑到之前的位置，最后删除COOKIE。
由于用到了迭代，每一次条件判断都需要等当前轮次的数据读取完成之后，它的执行才有效。所以异步获取数据的AJAX也要增加一个参数async:false，让AJAX不那么“异步”。
这样，当你返回的时候就会自动回到原来浏览的地方了，实际用起来并没有什么延迟感，是不是感觉特别爽呢？
如果你的页面上没有用到异步分页的话，这里还有个简易版的

$(document).ready(function(){
    $(document).scrollTop(Cookies.get('scrollTop'));
    Cookies.remove('scrollTop'); //移除cookie
    $(window).scroll(function(){Cookies.set('scrollTop', $(document).scrollTop())});
});

结尾

有些奇葩的问题往往都是被逼着解决的，如果你正好被这个问题困扰，希望能对你有帮助！
以上内容为作者原创，特此声明，如需转载，请征得作者同意