记录滚动位置

h5页面记录滚动位置的步骤思想

第一种情况：页面不分页时候,只是记录滚动位置，记录个滚动缓存就可以了，跳转到滚动位置就可以了。（百度上很多，就不说了。）

第二种情况：页面分页时候，记录滚动位置

这种情况很坑，以下是处理这样的情况的步骤（举例：电商商品首页记录位置）

总要思想步骤：

1.先记录滚动位置和当前商品数据到缓存。

ps:因为跳转时候如果不先渲染出你的页面，这时候你滚动位置如果大于你的某个值，会跳到当前最大位置，就是没有进行分页的最大位置。

2.分页算法里面记录你的当前页和总页数，当页面刷新好后，当前页和总页数进行判断，是否该分页，以防已经到底还能下拉分页

3.页面刷新后，先根据你的缓存数据渲染页面，然后再进行跳转，这样滚动跳转位置就是正确的，页面页面高度已经发生了变化

4.缓存渲染完页面后，你需要再次获取和缓存数据一样的最新的数据，然后再次渲染页面，最后重置缓存为最新的数据，以防数据变化后，页面还是一直未缓存的页面

 

需要注意的地方：

1.取消默认浏览器记录位置的自动滚动

history.scrollRestoration = 'manual';

2.封装你的分页算法，并且在算法里面记录当前页，页码总数

3.监听滚动时候，记录你的滚动位置

4.监听滚动时候，判断当前页面是否大于页码总数，这里需要处理好你所存的分页总数和当前页，需要做处理，否则你的分页和总页数刷新时候，会出错，这里需根据你的需求，自己做容错，代码部分举例

var pageNo = localStorage.pageNo?parseInt(localStorage.pageNo):pageNo;
            if(isNaN(localStorage.pageTotal)){
                if(localStorage.goodsData){
                    pageTotal = JSON.parse(localStorage.goodsData).length;
                }
            }else{
                pageTotal = localStorage.pageTotal;
            }
            if (pageNo > pageTotal) {
                $(".backtop").fadeIn(1000)
            } else {
               if (scrollTops() + windowHeight() >= (documentHeight() - 40 /*滚动响应区域高度取50px*/ )) {
                    GetRectGoods()
                }
            }

5.分页里面需要判断当前页码是否大于总页码，大于的话，让当前页码等于总页码，以防刷新后，可以一直滚动，举例代码

if(pageNo>pageTotal){
        pageNo = pageTotal;
    }

6.记录完滚动后记得，刷新缓存