微信浏览器自带的返回上一页的停留位置 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 每次请求多少个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.ο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);
                        };
                        //正常状态请求了多少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 欢迎一起交流学习

转载于:https://www.cnblogs.com/junxi/p/5228467.html