Wap 手机端页面 history.go(-1) 返回上一级页面的初始位置，而不是顶部的解决办法

学习笔记马富天 2018-08-22 17:26:30 125 4

【摘要】本文介绍一下一个在开发过程中特别容易遇到的问题，即当我们在浏览列表页的时候，点击进入文章详情页面之后再次返回列表页面，此时返回了列表页的顶部，而很多时候我们是希望直接就是返回我们点击时候所在的位置（下拉后的位置），有一般办法是 history.go(-1)，这样，但是不兼容手机 IOS 下的 QQ 内部浏览器等等。本文给出一个兼容所有浏览器的解决办法。

本文采用 jquery 来记录跳转时候所在位置，保存在 cookie 中，当我们返回页面的时候，判断 cookie 是否存在，存在则直接滑到该位置。

下面直接给出亲测有用的完整代码，index.html：

<!DOCTYPE html>

<html>

	<head>

		<meta name="viewport" content="width=device-width,initial-scale=1.0" />

		<style type="text/css">

		*{margin:0;font-size:12px;}

		.main{height:2400px;text-align:center;}

		a{display:block;height:500px;margin-top:50px;}

		</style>

	</head>

	<body>

		<div class="main">

			<a href="index.html">index.html</a>

			<a href="1.html">1.html</a>

			<a href="2.html">2.html</a>

			<a href="index.html">index.html</a>

			<a href="3.html">3.html</a>

			<a href="1.html">1-1.html</a>

			<a href="index.html">index.html</a>

			<a href="2.html">2-1.html</a>

			<a href="3.html">3-1.html</a>

		</div>

		<script src="jquery/jquery-1.9.1.min.js"></script>

		<script src="jquery/jquery.cookie.min.js"></script>

		<script>

			var referrer = document.referrer;

			var url = window.location.href;

			//滚动时保存滚动位置

			$(window).scroll(function(){

				if($(document).scrollTop()!=0){

					sessionStorage.setItem("offsetTop", $(window).scrollTop());

});

			//onload时，取出并滚动到上次保存位置

			window.onload = function(){

				var offset = sessionStorage.getItem("offsetTop");

				if(referrer == "null" || referrer == url)

				}else{

					//	返回位置

					$(document).scrollTop(offset);

};

		</script>

	</body>

</html>

1.html、2.html、3.html 的内容是：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<meta name="viewport" content="width=device-width,initial-scale=1.0" />

		<title></title>

		<style type="text/css">

			*{margin:0;font-size:12px;}

		</style>

	</head>

	<body>

		<a href="javascript:void(0);" onclick="history.go(-1)">返回</a>

		<a href="index.html">返回</a>

	</body>

</html>

这样就使用 jquery 实现的解决返回列表页面时直接返回顶部的问题。

顶0

踩0

但愿每次回忆，对生活都不感到负疚。

打赏银两×

Wap 手机端页面 history.go(-1) 返回上一级页面的初始位置，而不是顶部的解决办法

随机阅读换一批

文章分类

TOP10