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

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

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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
  5. 		<style type="text/css">
  6. 		*{margin:0;font-size:12px;}
  7. 		.main{height:2400px;text-align:center;}
  8. 		a{display:block;height:500px;margin-top:50px;}
  9. 		</style>
  10. 	</head>
  11. 	<body>
  12. 		<div class="main">
  13. 			<a href="index.html">index.html</a>
  14. 			<a href="1.html">1.html</a>
  15. 			<a href="2.html">2.html</a>
  16. 			<a href="index.html">index.html</a>
  17. 			<a href="3.html">3.html</a>
  18. 			<a href="1.html">1-1.html</a>
  19. 			<a href="index.html">index.html</a>
  20. 			<a href="2.html">2-1.html</a>
  21. 			<a href="3.html">3-1.html</a>
  22. 		</div>
  23. 		<script src="jquery/jquery-1.9.1.min.js"></script>
  24. 		<script src="jquery/jquery.cookie.min.js"></script>
  25. 		<script>
  26. 			var referrer = document.referrer;
  27. 			var url = window.location.href;
  28. 			//滚动时保存滚动位置
  29. 			$(window).scroll(function(){
  30. 				if($(document).scrollTop()!=0){
  31. 					sessionStorage.setItem("offsetTop", $(window).scrollTop());
  32. 				}
  33. 			});
  34. 			//onload时,取出并滚动到上次保存位置
  35. 			window.onload = function(){
  36. 				var offset = sessionStorage.getItem("offsetTop");
  37. 				if(referrer == "null" || referrer == url)
  38. 				{
  39. 				}else{
  40. 					//	返回位置
  41. 					$(document).scrollTop(offset);
  42. 				}
  43. 			};
  44. 		</script>
  45. 	</body>
  46. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
  6. 		<title></title>
  7. 		<style type="text/css">
  8. 			*{margin:0;font-size:12px;}
  9. 		</style>
  10. 	</head>
  11. 	<body>
  12. 		<a href="javascript:void(0);" onclick="history.go(-1)">返回</a>
  13. 		<a href="index.html">返回</a>
  14. 	</body>
  15. </html>

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

版权归 马富天PHP博客 所有

本文标题:《Wap 手机端页面 history.go(-1) 返回上一级页面的初始位置,而不是顶部的解决办法》

本文链接地址:http://www.mafutian.net/375.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 thinkphp 在 centos(linux) 系统中验证码不能正常显示 》 下一篇《 使用 PHP 程序自动检测并处理 UTF-8 文件中包含有的 BOM 头 》

所有评论

  1. 首页
  2. 上一页
  3. 1
  4. 下一页
  5. 尾页
  6. 第1页
  7. 每页12条
  8. 共1页
  9. 共4条
评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多