转载：利用本地存储实现记录滚动条的位置

在做项目的时候，希望给页面添加一个功能，就是刷新页面之后滚动条还可以保持在刷新之前的位置，方便用户继续浏览。查询了相关资料之后看到一篇文章讲得不错，链接如下：

原文地址：http://learning.sohu.com/20161219/n476332520.shtml

作者：HTML5学堂(http://www.h5course.com/)

文章原文：

　在一定时间范围内，用手机微信打开之前浏览过的订阅号的文章，文章显示出来的是你上次阅读到的位置，而不是从头开始显示。手机微信是怎么知道你文章阅读的位置？前端工程师能否实现该功能？

　　本文主要内容：

　　1、功能介绍

　　2、功能分析

　　3、知识要点

　　4、具体实现

　　5、总结

　　1、功能介绍

　　为了让大家更清楚的知道今天要学习的效果，先一起来体验一下吧。我们先在手机微信打开Html5学堂订阅号中的文章，当文章浏览到某一个位置的时候点击左上角返回，然后再次点击刚刚浏览过的那篇文章，显示出来的是你刚才阅读到的位置，而不是从头开始显示，这个用户体验是不是觉得很赞。

　　效果：

　　2、功能分析

　　这个功能的实现并不是很难，当页面滚动时记录页面滚动条的位置并保存到本地存储里面，当你再次打开页面的时候读取本地存储里面的值来设置页面滚动条的位置。具体我们来分析一下。

　　分析：

　　1）监听页面滚动条的状态（是否滚动）

　　2）滚动时获取页面滚动条的位置

　　3）滚动条的位置保存到本地存储里面

　　4）页面每次加载的时候获取本地存储里面的值

　　5）获取到的值来设置页面滚动条的位置

　　3、知识要点

　　1）监听页面滚动条的状态（是否滚动）

　　浏览器监测到滚动条发生滚动时，就会触发scroll事件。

1 < type="text/java"> 2 window.addEventListener('scroll', function() { 3 console.log('滚动条滚动了'); 4 }, false); 5 </> 

原标题：转载：利用本地存储实现记录滚动条的位置

关键词：位置