遇到一个难题,就是页面有时进入后总是会自动滚动到底部。起先以为是代码问题,查找了整个系统没发现相关操作。后来才后知后觉html5新增window.history.scrollRestoration属性,这是一个实验性质的api,chrome 46以上版本都支持
浏览器自身加了这个设定是好意,但是有些页面用户希望不要记住滚动条位置。经过尝试在代码中加入执行以下代码可以解决问题
if ("scrollRestoration" in history) {
history.scrollRestoration = "manual";
} else {
window.onunload = function() {
window.scrollTo(0, 0);
};
}
在找到上述方法之前,首先尝试了在window.onload时执行window.scrollTo(0,0)不能解决问题,页面依然会记录滚动条位置并跳转,加入定时器异步执行则会先跳转记录位置 再置顶体验不好。
于是研究window.history.scrollRestoration属性
History:{
length: 14
scrollRestoration: "auto"
state: nul
}
scrollRestoration的默认参数:auto,自定滚动条位置。此外还有一个参数:manual,手动定位滚动条位置
因此我们需要先检测history.scrollRestoration是否支持,是则将history.scrollRestoration 设为 "manual",到此大功告成了。