利用js中的scrollTop() 方法解决页面返回上次浏览位置问题

最近在工作中遇到了一个问题，从商品列表页面进入到详情页后再返回，页面又回到了最顶部，而不是上次浏览的位置。这样的用户体验肯定是很差的。就查了一下资料，发现利用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'。结果试了一下，没有用。

最后发现需要给元素的父级加高度，加过高度后就可以实现效果了。