//滚动时保存滚动位置 $(window).scroll(function(){ if($(document).scrollTop()!=0){ sessionStorage.setItem("offsetTop", $(window).scrollTop()); } }); //onload时,取出并滚动到上次保存位置 window.onload = function(){ var offset = sessionStorage.getItem("offsetTop"); $(document).scrollTop(offset); }; //页面加载完成时,取出并滚动到上次保存位置 $(document).ready(function(){ var offset = sessionStorage.getItem("offsetTop"); console.log('offsetTop',offset ) $(document).scrollTop(offset); });
上面是保存当前滚动位置并可以返回到滚动位置的方式,而下面是重点逻辑:
常规:用户滑动加载数据→激动的手开始点击进入详情→购买或者不喜欢要返回列表→从头开始一页一页往下翻找~(内心崩溃)
优化后:用户滑动加载数据→激动的点后开始点击想进入详情→js保存当前滚动状态、数据→购买或者不喜欢要返回列表→从刚刚的位置开始一页一页往下翻找(表面平静,但是乐开花了)
js逻辑实现:点击时保存当前分页、滚动位置、已加载数据、其他(比如关键词、排序等搜索条件)→用户潇洒时间→返回列表时查询是否有上次是浏览状态,没有就从头开始,有则加载上次的缓存继续从上次开始的地方浏览。
关键点:滚动位置、分页保存、旧数据保存、过期设置(按需来)
比如我的操作:
//点击的时候存储一下数据 var status = { pt:pt, keyword:keyword, sort:sort, cpage: cpage,//当前分页 scrollTop: $(window).scrollTop(),//当前滚动位置 data:$(".wy-pro-list").html(),//当前旧数据(5M以内) } //console.log('aaaa',JSON.stringify(status)) sessionStorage.setItem('key_status', JSON.stringify(status)); //初始化页面检查: var gstatus = sessionStorage.getItem('key_status'); if (gstatus){ gstatus = JSON.parse(gstatus); pt = gstatus.pt; keyword = gstatus.keyword; sort = gstatus.sort; cpage = gstatus.cpage; var offset = gstatus.scrollTop; //旧数据还原 $(".wy-pro-list").html(gstatus.data); //滚动位置跟上哈 $(document).scrollTop(offset); //加载新的数据 addItem(); }else { //从零开始咯 addItem(); }
注意:
$(document)可以设置为$(windows)、$("#list")、$(".abc")
也就是当用windows或者document无法获得高度时用对应的容器标识可以,可以是id、class标识