问题:一个页面被重新加载导致,页面回到了初始的位置
需求:页面重新加载,但是页面位置状态和加载前保持一致
模拟情况:一个巨长的下拉列表,对 对应的数据处理后,更新列表(页面的列表List中某一行 的 元素 为<a id = "2011" >the element</a>)
分析:list的可视范围就是在testDiv的div中(即绿色框框内),可控制div的scroll来决定list可视的位置
第一步:在进行重新加载前,获取当前位置的l列表元素的线索(这里指“the element”)将其保存在本地缓存:
localStorage.setItem( "bmid" , $( "#2011" ).html() );
其中$(“#2011”)为被编辑元素根据相应情况获取的DOM节点
第二步:加载完毕后,获取the element节点的高度 H(如图节点上沿到如图绿色div的上边界):
var str= localStorage.getItem("bmid");(获取本地缓存)
var ele = null;
$("list").each(function(){
if($(this).html() == str)
ele = $(this);
}
H = ele.offset().top;
第三步:将div的scrollTop设置为 H 将list的上移
H 的高度(如二图)
$("#testDiv").animate({ scrollTop : H },100);
关键字:localStorage,offset,scrollTop
(其中offset只能获取 操作节点 至 div上沿的高度)