我们做过微信的应该都知道，微信自带的返回上一页，就是重新打开页面。并不是返回历史页面。我们PC端的浏览器是返回历史页面。点击返回页面之后 上一个页面的scrollTop还是之前没有进入新页面的位置。
我看了下京东的微信网站。果然和我想到的方法一样。利用sessionStorage HTML5本地存储 进行存储位置scrollTop以及加载了多少次ajax次数 微信返回上一页（当前页面）之后。就会onload一下。设置最后一次scrollTop的值。以及一次性通过ajax传递之前加载的次数size渲染页面。这样在微信里面就可以实现和PC一样的效果。
代码如下：
var c=0,
matter=el(document,".matter",1);
window.onload=function(){
var a=b=null;
if(window.sessionStorage){
a=parseInt(sessionStorage.getItem("top"));
b=parseInt(sessionStorage.getItem("size"));
//6是AJAX 每次请求多少个dd
num=6*b;
c=b?b:0;
// ajax渲染
for (var i = 0; i < num; i++){
var dd=document.createElement("dd")
dd.innerHTML="<a href='./source.html'><img src='images/1.jpg' alt='' /><div class='sug'><h2>魔力魔力魔力魔力魔力魔力魔力魔...</h2><p>收获佣金<b>￥106.00</b></p><p class='num'>点击量 125"+i+"</p></div></a>"
matter.querySelector("dl").appendChild(dd);
};
alert(a);
document.body.scrollTop=a;
}
}
window.onscroll=function(){
var tops=document.body.scrollTop,
height=document.documentElement.scrollHeight,
scrollbottom=height-_height-tops;
console.log("top:"+tops+"height:"+height+"scrollbottom:"+scrollbottom+"_height"+_height);
if(window.sessionStorage){
sessionStorage.setItem("top",tops);
sessionStorage.setItem("size",c);
}
if(scrollbottom==0||scrollbottom==-1){
$.ajax({
//type: 'GET',
//url: './',
//data: { size: 6 },
//dataType: 'json',
//timeout: 300,
beforeSend:function(){
$(".panle").removeClass("pon");
},
success: function(data){
$(".panle").addClass("pon");
for (var i = 0; i < 6; i++){
var dd=document.createElement("dd")
dd.innerHTML="<a href='./source.html'><img src='images/1.jpg' alt='' /><div class='sug'><h2>魔力魔力魔力魔力魔力魔力魔力魔...</h2><p>收获佣金<b>￥106.00</b></p><p class='num'>点击量 125"+i+"</p></div></a>"
matter.querySelector("dl").appendChild(dd);
};
//正常状态请求了多少AJAX
c++;
},
error: function(xhr, type){
alert('Ajax error!')
}
})
}
}
代码是我之前一个项目上的demo代码。重点就是 sessionStorage 对了 说道sessionStorage 我说一下为什么没用localStorage localStorage是永久的。这样就会有一个问题，当前退出了这个网站之后 下次打开网站 进入这个页面。那么你最后一次离开的值依然存在在本地存储里面。用户体验就不好了。sessionStorage就不错，因为是临时性的。关闭了网站，下次进入的时候就是重新开始保存计算。
定义了一个全局变量c。还有a,b是获取sessionStorage里面的scrollTop 和ajax的值。onscroll的时候记录这两个值实时保存到sessionStorage里面。每次AJAX请求成功了，就c++一下。
c=b?b:0 这个意思就是 如果请求了ajax c的值就是等于b否则等于0.这样做因为c是全局变量，每次重新打开页面它都会等于0的.
知道了最后一次scrollTop和size OK了 我们就直接AJAX一次行渲染出来结构。在设置scrollTop位置。最好是先渲染再设置。反过来scrollTop会出现BUG。因为页面结构没有这么多。位置停留会出现在最底部。并没有到最后一次的位置。加载之后 结构躲起来了，页面高度也有了。这样scrollTop就可以好好设置。
QQ 295989501 欢迎一起交流学习
版权声明：本文为博主原创文章，未经博主允许不得转载。