微信浏览器自带的返回上一页的停留位置

http://blog.csdn.net/wangbao2111/article/details/50633790
我们做过微信的应该都知道,微信自带的返回上一页,就是重新打开页面。并不是返回历史页面。我们PC端的浏览器是返回历史页面。点击返回页面之后 上一个页面的scrollTop还是之前没有进入新页面的位置。
解决办法:利用sessionStorage HTML5本地存储 进行存储位置scrollTop以及加载了多少次ajax次数 微信返回上一页(当前页面)之后。就会onload一下。设置最后一次scrollTop的值。以及一次性通过ajax传递之前加载的次数size渲染页面。这样在微信里面就可以实现和PC一样的效果。
简易代码如下:
[javascript] view plain copy 在CODE上查看代码片派生到我的代码片
var curPage = 1; //当前页码 
window.onload = function() 

<span style="white-space:pre">    </span>if(window.sessionStorage){ 
<span style="white-space:pre">        </span>var top = parseInt(sessionStorage.getItem("top")); 
    <span style="white-space:pre">    </span>var size = parseInt(sessionStorage.getItem("size")); 
        top = top?top:0; 
        size = size?size:1; 
                  
        for (var i = 1; i <= size; i++){ 
        <span style="white-space:pre">    </span>//此处调用ajax填充数据 
        }; 
        document.body.scrollTop = top; 
    } 

 
$(window).scroll(function(){ 
   <span style="white-space:pre"> </span>totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); 
<span style="white-space:pre">    </span>var tops=document.body.scrollTop; 
   <span style="white-space:pre"> </span>if(window.sessionStorage){ 
       <span style="white-space:pre">     </span>sessionStorage.setItem("top",tops); 
       <span style="white-space:pre">     </span>sessionStorage.setItem("size",curPage); 
   <span style="white-space:pre"> </span>} 
}); 

猜你喜欢

转载自cuiyadll.iteye.com/blog/2323981
今日推荐