触屏网站H5页面,微信中返回,记录上一个页面的访问位置,使用Javascript返回原来的高度

来源:转载

目的

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


思路

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


方案

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


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


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


Cookie.set(paramName, paramValue),设置cookie
Cookie.get(paramName),获取cookie
Cookie.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())});
});

结尾

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


分享给朋友:
您可能感兴趣的文章:
随机阅读: