本文主要是介绍微信浏览器自带的返回上一页的停留位置 scrollTop，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
我们做过微信的应该都知道，微信自带的返回上一页，就是重新打开页面。并不是返回历史页面。我们PC端的浏览器是返回历史页面。点击返回页面之后 上一个页面的scrollTop还是之前没有进入新页面的位置。
我看了下京东的微信网站。果然和我想到的方法一样。利用sessionStorage HTML5本地存储 进行存储位置scrollTop以及加载了多少次ajax次数 微信返回上一页（当前页面）之后。就会onload一下。设置最后一次scrollTop的值。以及一次性通过ajax传递之前加载的次数size渲染页面。这样在微信里面就可以实现和PC一样的效果。
代码如下：
var c=0,matter=el(document,".matter",1);window.οnlοad=function(){var a=b=null;if(window.sessionStorage){a=parseInt(sessionStorage.getItem("top"));b=parseInt(sessionStorage.getItem("size"));//6是AJAX 每次请求多少个ddnum=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.οnscrοll=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);};//正常状态请求了多少AJAXc++;},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 欢迎一起交流学习
这篇关于微信浏览器自带的返回上一页的停留位置 scrollTop的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
