【知识整理】利用history.replaceState及location.hash记录滚动条位置

来源：互联网发布：mac pro关闭打开程序编辑：程序博客网时间：2024/06/14 15:28

最近有用户反映公司官网微信端页面在体验上的小问题：当当前页面刷新或者跳转到另一个页面又退回到当前页面后无法还原之前查看内容的位置，而是要从头拉动滚动条寻找之前看到的位置，用户觉得很麻烦。于是这个问题就落到了我的头上.
我的思路是这样的：当用户离开当前页面时记录当前页面的滚动条位置，当用户重新加载这个页面时取出记录的滚动条位置，通过js设置到页面上就可以了。这看似很简单啊，灵光一闪想到了2个解决办法:1.利用cookie存储滚动条的位置，当重新加载页面时从cookie中取出滚动条的值设置到页面上;2.使用html5的本地存储技术（localStorage），思路和上面相同。ok，按照上述方法编写代码，这不so easy么，这也太简单了体现不出我的水平啊，但是意外的蛋疼问题出现了。在pc端页面上上述方法是没有任何问题的，但是在微信端页面上却出现了bug，有一定几率上述方法会莫名其妙的失效。调了很久也没找到问题出在哪了，这下惨了，牛x吹大了，兜不住了吧。
没办法，只好换个思路，于是查看很多电商网站，发现他们的做法居然是把滚动条的位置存储在了浏览器的地址栏，我勒个xx你个oo的，真是毁三观啊，这样不会导致后台接收数据的时候收到了意外的数据么？后来在网上查到了些相关的资料，这种方式源于BOM的loaction.hash方法，关于locatin.hash的具体详情，请查看我转载的博客‘location.hash详解’。简单点说就是location.hash可以设置或读取浏览器地址栏中以‘#’开始的键值数据,同时该值会在发送到后台时被忽略掉。是不是觉得眼前一亮呢？我们完全通过location.hash在浏览器地址栏中记录下滚动条的位置，而不会对后台数据产生干扰。
1.获取location.hash.举个栗子：假设浏览器地址栏如下：www.xx00.com/#st=110, 如果使用location.hash会得到‘#st=110’.
2.设置location.hash.举个栗子：假设浏览器地址栏如下：www.xx00.com, 如果使用location.hash='#st=110',就会使页面跳转到www.xx00.com/#st=110
原本想通过location.hash就能实现记录滚动条的位置，但后来发现此方法不可行，因为每当通过location.hash在当前浏览器地址栏url中添加数据时，就会将该url作为新打开的页面，将其压入浏览器的历史记录栈中，这就导致了浏览器的前进和后退功能发生紊乱，因此要配合history.replaceState使用达到目的。这里要配合一个新的方法,history.replaceState,该方法是html5新增方法，其作用是，在不刷新页面的基础上,修改浏览器地址栏url，同时用修改后的url在浏览器的历史记录栈替换原url，具体使用方法如下：history.replaceState(state,title,url)，该方法存在3个参数;
1. state对象 –state对象是一个JavaScript对象，它关系到由replaceState()方法创建出来的新的history实体。用以存储关于你所要插入到历史记录的条目的相关信息。State对象可以是任何Json字符串。因为firefox会使用用户的硬盘来存取state对象，这个对象的最大存储空间为640k。如果大于这个数值，则该方法会抛出一个异常。如果确实需要更多的空间来存储，请使用本地存储。
2.title—firefox现在会忽略这个参数，虽然它可能将来会被使用上。而现在最安全的使用方式是传一个空字符串，以防止将来的修改。或者可以传一个简短的标题来表示state
3. URL—简单地说就是你需要修改成的地址栏的新的url。新的url必须和现有的url同域，否则将抛出异常。这个参数是选填的，如果为空，则会被置为document当前的url。

具体代码如下：注：1.代码依赖于jquery，请在该代码前引入jquery。

<span style="font-size:14px;"><!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8"/>    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>    <meta name="author" content="liyanan"/>    <title>测试</title></head><body><script>//网页加载完成后执行//如果存在location.hash的值侧将其中存储的滚动条的值设置到页面上window.onload=function(){if(location.hash){var scrollTop=location.hash.replace('#scrollTop=',''); setTimeout(function(){            $(window).scrollTop(st);},300);}    };//离开网页后执行window.onunload=function(){var hrefs='';//如果存在location.hash，则把之前添加到地址栏的hash删除，重新赋予其新值if(location.hash){hrefs=location.hash.replace(/#scrollTop=\d+/,'');}//这里history.replaceState()第1、2个参数不是我所关心的，因此设置为空串history.replaceState('','',hrefs+'#scrollTop='+$(window).scrollTop());};</script></body></html></span>

1 0