1. 记录页面位置,保持位置不变
1. 记录页面位置
sessionStorage.setItem('theScrollTop', document.documentElement.scrollTop);
2. 读取页面位置,酌情考虑是否用setTimeout
setTimeout(function () { var theScrollTop = sessionStorage.getItem('theScrollTop'); document.documentElement.scrollTop = theScrollTop - 1; }, 10) }, false)
2.列表页点击查看详情页,点击返回保持列表原位置
1. 方式一:sessionStorage存储已加载出的列表,页面位置(如 1),并且存储相关获取数据的参数等等,返回列表页市直接$(elwp).html('记录的列表');
注意:要想好何时清理sessionStorage内容
2. 方式二:用jQuery load()方法把详情页直接引入,点击加载详情页时隐藏列表页
注意:1. 隐藏列表页操作 和 jQuery load()可能会触发window.onscroll事件;
2. 返回列表时用window.addEventListener拦截,因为此时虽然显示的是详情页,但还是在列表页中。
例如:
function pushHistory() { var state = { title: "title", url: "#" }window.history.pushState(state, "title", "#"); }
pushHistory()
window.addEventListener("popstate", function () {
$('#body').show(); $('#detail').html('');
setTimeout(function () { var theScrollTop = sessionStorage.getItem('theScrollTop'); document.documentElement.scrollTop = theScrollTop - 1; }, 10)
return;
}, false)