使用sessionStorage实现返回上一页直接到离开时的位置

最新推荐文章于 2022-10-17 16:13:14 发布

原创最新推荐文章于 2022-10-17 16:13:14 发布 · 2.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #sessionSto

javascript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种利用sessionStorage在浏览器中记录页面滚动位置的方法。当用户在不同页面间切换时，通过保存和恢复滚动位置，使得用户返回时可以直接看到上次浏览的内容位置，提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用sessionStorage实现，在返回到之前浏览的页面时，直接将页面展示到用户刚刚浏览的位置，而不是重新刷新页面到了页面顶部。

代码：

//page01.html
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
		// 页面加载时, 从sessionStorage中拿出之前保存的距离顶部的距离,并定位到位置
		window.onload = function() {　　
			var _offset = sessionStorage.getItem("toTop");　　
			$(document).scrollTop(_offset);
		};
		// 在跳转至其他页面时,保存该页面距离顶部距离到sessionStorage
		$(".btn").click(function() {
			if($(document).scrollTop() != 0) {
				sessionStorage.setItem("toTop", $(window).scrollTop());
			}
		});
</script>
<body>
	<p>这是一行的信息</p>
	<p>这是一行的信息</p>
	...
	<p>这是一行的信息</p>
	<p>这是一行的信息</p>

	<a href="page02.html" class="btn">跳转页面</a>
</body>

//page02.html
<body>
	<h1>这是页面2</h1>
	<a href="index.html">回到页面1</a>
</body>

代码解释：
用户点击”跳转页面按钮“，拿到滚动位置，存入sessionStorage中。
在页面onload时，拿到存在sessionStorage中的滚动位置数据，滚动到相应的位置。

其他：

具体的sessionStorage和localStorage的解释和使用方法