最近在工作中遇到了一个问题,从商品列表页面进入到详情页后再返回,页面又回到了最顶部,而不是上次浏览的位置。这样的用户体验肯定是很差的。就查了一下资料,发现利用js中的scrollTop() 方法方法可以解决这个问题。
让我们先来看下文档中有关scrollTop()方法的介绍:
所以我们在滚动页面时保存滚动位置,onload时取出并滚动到上次保存位置。具体可以通过两种方法实现:
1.localStorage
<script>
//滚动时保存滚动位置
$(window).scroll(function(){
if($(document).scrollTop()!=0){
localStorage.setItem("offsetTop", $(window).scrollTop());
}
});
//onload时,取出并滚动到上次保存位置
window.onload = function(){
var offset = localStorage.getItem("offsetTop");
$(document).scrollTop(offset);
};
</script>
2.sessionStorage
<script>
//滚动时保存滚动位置
$(window).scroll(function(){
if($(document).scrollTop()!=0){
sessionStorage.setItem("offsetTop", $(window).scrollTop());
}
});
//onload时,取出并滚动到上次保存位置
window.onload = function(){
var offset = sessionStorage.getItem("offsetTop");
$(document).scrollTop(offset);
};
</script>
其中localStorage:本地对象存储,可设置过期时间,一般用于登录信息和用户习惯的本地保存
sessionStorage:针对于网页窗口的数据存储,一旦窗口关闭,存储数据会马上被清空
另外在实现的过程中也遇到了一些问题,已经记录了滚动条的位置,但返回到商品列表页面时又回到了顶部。在网上看到说:当一个元素的display属性为'none'时,对该元素设置scrollTop属性是无效的,所以,即使是jQuery的scrollTop方法也会无效,需要设置为'block'。结果试了一下,没有用。
最后发现需要给元素的父级加高度,加过高度后就可以实现效果了。