js在新页面中返回到上一页浏览的历史位置

时间：2024-03-05 09:49:45

在微信浏览器中浏览页面时，在当前页面中当我们将页面往下滚动到某一个位置时，可能我们就会点击某个链接而页面跳转到了另外一个页面，而当我们又返回到上一个页面时我们会发现那个页面还停留在我们之前浏览的位置，很方便我们接着往下浏览页面上其他的信息，这种效果大大提升了用户的体验度，提升了网站的逼格。今天，我就把实现这种效果的原理和代码分享给大家，方便大家的开发使用。

原理

1、用户滚动页面时，记录滚动条距离页面顶部的距离scrollTop；
2、将记录的值保存到cookie；
3、在返回到上一页时，再将保存到cookie中那个值赋值给上一页的滚动条距离顶部的距离scrollTop即可。

注意

明白了实现的原理，那么代码上的实现就简单多了。这里有一个问题值得注意，因为我们这个效果可能会在不同的页面上实现，那就要定义多个cookie来记录不同页面的滚动高度，因此相当麻烦。为了解决这个问题我们可以使用一个相对简单的方法，就是cookie的值是以页面的文件名命名，js中创建cookie时，自动获取页面路径，截取页面的文件名，并将cookie名设置为此文件名，这样就可以避免多次命名，从而减少了代码。

具体代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>在新页面中返回到上一页浏览的历史位置</title>
<style>
p{margin:30px 0;}
</style>
</head>
<body>
<p>在新页面中返回到前一页浏览的历史位置1</p>
<p>在新页面中返回到前一页浏览的历史位置2</p>
<p>在新页面中返回到前一页浏览的历史位置3</p>
<p>在新页面中返回到前一页浏览的历史位置4</p>
<p>在新页面中返回到前一页浏览的历史位置5</p>
<p>在新页面中返回到前一页浏览的历史位置6</p>
<p>在新页面中返回到前一页浏览的历史位置7</p>
<p>在新页面中返回到前一页浏览的历史位置8</p>
<p>在新页面中返回到前一页浏览的历史位置9</p>
<p>在新页面中返回到前一页浏览的历史位置10</p>
<p>在新页面中返回到前一页浏览的历史位置11</p>
<p>在新页面中返回到前一页浏览的历史位置12</p>
<p>在新页面中返回到前一页浏览的历史位置13</p>
<p>在新页面中返回到前一页浏览的历史位置14</p>
<p>在新页面中返回到前一页浏览的历史位置15</p>
<p>在新页面中返回到前一页浏览的历史位置16</p>
<p>在新页面中返回到前一页浏览的历史位置17</p>
<p>在新页面中返回到前一页浏览的历史位置18</p>
<p>在新页面中返回到前一页浏览的历史位置19</p>
<p>在新页面中返回到前一页浏览的历史位置20</p>
<p>在新页面中返回到前一页浏览的历史位置21</p>
<p>在新页面中返回到前一页浏览的历史位置22</p>
<p>在新页面中返回到前一页浏览的历史位置23</p>
<p>在新页面中返回到前一页浏览的历史位置24</p>
<p>在新页面中返回到前一页浏览的历史位置25</p>
<p>在新页面中返回到前一页浏览的历史位置26</p>
<p>在新页面中返回到前一页浏览的历史位置27</p>
<p>在新页面中返回到前一页浏览的历史位置28</p>
<p>在新页面中返回到前一页浏览的历史位置29</p>
<p>在新页面中返回到前一页浏览的历史位置30</p>
<a href="01.html">去下一页</a>
<script src="zepto.min.js"></script>
<script>
$(function () {
	var str = window.location.href;
		str = str.substring(str.lastIndexOf("/") + 1),
		getCookie = localStorage.getItem(str);
	if (getCookie) {
		$("html,body").scrollTop(getCookie);
	}
});
$(window).scroll(function () {
	var str = window.location.href;
	str = str.substring(str.lastIndexOf("/") + 1);
	var top = $(window).scrollTop();   //在zepto下这里使用$(document)是获取不到页面滚动的高度，在jq下是可以的
	localStorage.setItem(str, top);
});
</script>
</body>
</html>

下一页的代码随便写就可以了，主要是为了能够返回上一页。

下一页代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>在新页面中返回到前一页浏览的历史位置</title>
</head>
<body>
	<p>在此页面直接返回到上一页就可以看到上一页的浏览的历史位置</p>
</body>
</html>

在代码中，大家可能会发现我使用了localStorage这个属性，这个属性是H5的特性，也是用来保存cookie的，具体使用方法大家可自行查阅资料，这里不多说。如果是用在PC端，大家尽量选择原生js的cookie或使用jq的cookie插件，原理跟H5的一样。

最后附上本案例代码的下载包：在新页面中返回到上一页浏览的历史位置

相关文章