新知识点

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)

你可能感兴趣的:(新知识点)