非spa应用列表跳转详情页后再返回列表页位置不变

最近给公司写项目，涉及到一个很常见的问题，那就是列表页跳转详情页之后怎么保证列表页一切不变，数据不变，位置不变？单页面应用当然很好解决，把详情页写成子路由，监控路由，返回时销毁子页面就可以了，那么如果不是单页面应用呢？我司目前这个项目是html+css+jquery,并且一个页面里有左右滑动的列表（有很多大分类），还有查看更多的按钮，查了很多资料，大概有两种比较好的方法：
（1）当点击每条列表时向sessionStorage里存入当前选中的item（某个分类）、滚动条滑动的距离，目前加载了的条数，当返回列表页时，取出sessionStorage里的这些值，重新获取数据然后scrollTop定位到之前的位置，一个不太好操作的是，我们必须等到数据全部加载完成再scrollTop定位，即

setTimeout（function{
    //scrollTop(h)
},time）

如果之前加载了很多很多数据，time写多少就很难控制。
（2）一个推荐的方法，我在写的时候觉得单页面应用处理这个问题的思路特别好，就想非单页面是否能使用同样的思路解决问题，于是我想到了使用弹出iframe层覆盖原列表页面，但当在详情页时，如果点击返回，就无法返回列表页，而是返回了列表页的前一页，（因为现在还是在列表页，详情页只是一个弹出层），如何让看详情页时点击浏览器的返回按钮只关闭弹窗不后退呢，这时我想到了锚点，由于在网址后添加#不会出现网页的重新加载，就实现了我们只关闭详情页不加载列表页数据的想法，搜了一下，解决办法如下：
结构改为：

<a href='javascript:void(0)' data-href="{{LinkUrl}}"></a>

在点击每条列表时存下要跳转的地址，使用window.location.hash增加一个浏览记录，替代当前详情页，（#后面加什么都可以，只是为了占一个浏览记录），使用layer弹出iframe层，即到了详情页

$('.m-list a').click(function(){
  var u = $(this).data('href');
  window.location.hash = "#"+u;
  layer.open({
    type: 2,
    area: ['100%', '100%'],
    content: u
  });
})

返回时，点击浏览器返回按钮

$(window).on('popstate', function () {
  parent.layer.closeAll();
});

当地址变化时触发关闭layer弹出层的操作，回到了列表页的界面。
简单方便，真的很好用！

----------------------------------------------------------------------------------------

发现这个只能在pc用，iframe层太不兼容了！