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

原理

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的一样。

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

js在新页面中返回到上一页浏览的历史位置的更多相关文章

  1. 控制使用jquery load()方法载入新页面中的元素

    最近在项目中用到jquery的load()方法来加载页面,首先简单说一下load()方法. load(url,data,callback);该方法接收三个参数,第一个是载入的页面地址,第二个是要传到服 ...

  2. 如何使用Web3.js API 在页面中进行转账

    本文介绍如何使用Web3.js API 在页面中进行转账,是我翻译的文档Web3.js 0.2x 中文版 及 区块链全栈-以太坊DAPP开发实战 中Demo的文章说明. 写在前面 阅读本文前,你应该对 ...

  3. 使用HTML5的JS选择器操作页面中的元素

    文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...

  4. js打开新页面 关闭当前页 关闭父页面

    js打开新页面.关闭当前页.关闭父页面 2010-04-29 14:04:13|  分类: 页面与JavaScript |  标签: |字号大中小 订阅     //关闭当前页面,并且打开新页面,(不 ...

  5. OAF在打开的新页面中添加按钮，功能是关闭当前页面

    OAF在打开的新页面中添加按钮,功能是关闭当前页面 javascript:close()

  6. FineUI中在一个页面中通过控件事件(JS)向父页面中添加Tab页

    1.在前台页面尾部添加js代码 </form>    <script type="text/javascript">        var basePath ...

  7. js 打开新页面 window.open（）

    利用js打开一个新页面,而不是一个新窗口. 在网上各种东西啊,蛋疼了半天,还白疼了.. 后来看到a标签有target属性,然后又发现window.open()的第二个参数是target,然后我笑了(e ...

  8. 页面的div中有滚动条，js实现刷新页面后回到记录时滚动条的位置

    当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: ...

  9. 前端视频直播技术总结及video.js在h5页面中的应用

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12557070.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...

随机推荐

  1. xcode 6 出现的新问题

    1.prefix.pch文件的使用 [1].需要自己创建 点击new file-->选择IOS中的Other选项卡,选择PCH File [2].创建完后需要设置一下才能成功 Prefix He ...

  2. 基于LNMP的Zabbbix之Zabbix Agent源码详细安装，但不给图

    基于LNMP的Zabbbix之Zabbix Server源码详细安装:http://www.cnblogs.com/losbyday/p/5828547.html wget http://jaist. ...

  3. Analyzing the Meaning of Sentences

    1. How can we represent natural language meaning so that a computer can process these representation ...

  4. tinyxml2库的使用--MFC工程

    在编写应用程序的时候,经常需要动态加载某些数据,这种情况下微软的ini文件是蛮好的选择,但是平台的通用性比较差,使用xml的话就比较强一点,但是解析比较复杂,型号有牛人已经开发出了直接读写xml的库, ...

  5. Octave使用感想

    Octave是一门比较 简单.原始 的语言.从某方面来说和 shell 语言类似,只不过,shell语言主要用于 操作系统管理方面,而Octave侧重于科学计算方面. 语言本身没有提供或者说很简单的 ...

  6. python web开发基本概念

    参考了廖雪峰的Python博客. web请求顺序: 浏览器发送一个http请求 服务器收到请求后,生成一个html文档. 服务器将html文档作为http相应的body发送给浏览器 浏览器收到http ...

  7. Android手势识别总结

    一:首先,在Android系统中,每一次手势交互都会依照以下顺序执行. 1. 接触接触屏一刹那,触发一个MotionEvent事件. 2. 该事件被OnTouchListener监听,在其onTouc ...

  8. java设计模式面试

    设计模式 1. 单例模式:饱汉.饿汉.以及饿汉中的延迟加载,双重检查 2. 工厂模式.装饰者模式.观察者模式. 3. 工厂方法模式的优点(低耦合.高内聚,开放封闭原则) 单例模式 分类:懒汉式单例.饿 ...

  9. Eclipse配置Git发布项目到Github

    很牛叉的博客http://blog.csdn.net/luckarecs/article/details/7427605 一.安装插件 菜单栏Help --> Install New Softw ...

  10. SVN和Git的一些用法总结

    (A)SVN (1)查看日志提交的时候一般会写上注释,如果要查看提交日志,用以下命令: 1 svn log -l 4 其中,-l 4表示只查看最近4条日志(也可以没有这样的参数,就表示查看所有日志). ...