- 功能介绍
为了让大家更清楚的知道今天要学习的效,当文章浏览到某一个位置的时候点击左上角返回，然后再次点击刚刚浏览过的那篇文章，显示出来的是你刚才阅读到的位置，而不是从头开始显示，这个用户体验是不是觉得很赞。
微信图片_20170509134543.gif
2、功能分析
这个功能的实现并不是很难，当页面滚动时记录页面滚动条的位置并保存到本地存储里面，当你再次打开页面的时候读取本地存储里面的值来设置页面滚动条的位置。具体我们来分析一下。
分析：
1、监听页面滚动条的状态（是否滚动）
2、滚动时获取页面滚动条的位置
3、滚动条的位置保存到本地存储里面
4、页面每次加载的时候获取本地存储里面的值
5、获取到的值来设置页面滚动条的位置
3、知识要点
1、监听页面滚动条的状态（是否滚动）
浏览器监测到滚动条发生滚动时，就会触发scroll事件。
<script type="text/javascript">
window.addEventListener('scroll', function() { // 获取滚动条的位
var sTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(sTop);
}, false);
</script>
2、滚动时获取页面滚动条的位置
代码中解决了获取滚动条位置的兼容问题。
<script type="text/javascript">
window.addEventListener('scroll', function() {
// 获取滚动条的位置
var sTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(sTop);
}, false);
</script>
3、滚动条的位置保存到本地存储里面
使用本地存储的setItem方法设置本地存储的值。
<script type="text/javascript">
var ls = window.localStorage;
ls.setItem('sTop', 200);
</script>
4、页面每次加载的时候获取本地存储里面的值
先判断本地存储里面是否有记录过页面滚动条的值，如果有则获取本地存储的值，否则不进行操作。
<script type="text/javascript">
var ls = window.localStorage;
if (ls.getItem('sTop')) {
console.log(ls.getItem('sTop', 200));
} else {
console.log('抱歉，找不到滚动条的值');
}
</script>
5、获取到的值来设置页面滚动条的位置
跟获取滚动条位置一样处理了浏览器兼容问题。
<script type="text/javascript">
if (document.documentElement.scrollTop) {
document.documentElement.scrollTop = 200;
} else {
document.body.scrollTop = 200;
}
</script>
6 查看源代码：
<div class="wrap">
<h2>HTML5学堂官网</h2>
<p>HTML5学堂，致力于构建一个前端、HTML5的“原创”分享平台。能够为学习者提供一些资料，也为广大前端爱好者提供一个平台。HTML5学堂最初由两名讲师（利利和堡堡）创建，当前有多名HTML5讲师以及HTML5开发工程师组成。H5学堂中，主要涉及HTML与CSS、JavaScript、jQuery、AJAX等前端的基本的知识、HTML5的实例开发、JavaScript底层知识、类库、面试真题、相关技术、行业未来发展等。这里，将知识最通俗易懂的描述出来。我们希望HTML5学堂能够成为一个个性化的学习网站，为您提供最适合您的信息。</p>
<h2>HTML5学堂微信</h2>
<p>收罗HTML5与HTML5的相关技术。在这里有原创的HTML5、CSS3、JavaScript等前端知识，也有来自互联网的HTML5全新动态~HTML5学堂由几位讲师倾情打造，或许这里没有最牛的技术，但却将HTML5最浅显易懂的表达了出来。</p>
<h2>摩登足迹微信号</h2>
<p>当前你的智能手机,隐藏着哪些功能你不了解的功能,又有哪些优秀的生活软件?“狗带”“宝宝心里苦”到底什么意思?所有内容尽收于此.这里有智能手机的小用法,有各类优秀软件,也有那些你不了解的流行词汇.</p>
<h2>HTML5学堂官网</h2>
<p>HTML5学堂，致力于构建一个前端、HTML5的“原创”分享平台。能够为学习者提供一些资料，也为广大前端爱好者提供一个平台。HTML5学堂最初由两名讲师（利利和堡堡）创建，当前有多名HTML5讲师以及HTML5开发工程师组成。H5学堂中，主要涉及HTML与CSS、JavaScript、jQuery、AJAX等前端的基本的知识、HTML5的实例开发、JavaScript底层知识、类库、面试真题、相关技术、行业未来发展等。这里，将知识最通俗易懂的描述出来。我们希望HTML5学堂能够成为一个个性化的学习网站，为您提供最适合您的信息。</p>
<h2>HTML5学堂微信</h2>
<p>收罗HTML5与HTML5的相关技术。在这里有原创的HTML5、CSS3、JavaScript等前端知识，也有来自互联网的HTML5全新动态~HTML5学堂由几位讲师倾情打造，或许这里没有最牛的技术，但却将HTML5最浅显易懂的表达了出来。</p>
<h2>摩登足迹微信号</h2>
<p>当前你的智能手机,隐藏着哪些功能你不了解的功能,又有哪些优秀的生活软件?“狗带”“宝宝心里苦”到底什么意思?所有内容尽收于此.这里有智能手机的小用法,有各类优秀软件,也有那些你不了解的流行词汇.</p>
<h2>HTML5学堂官网</h2>
<p>HTML5学堂，致力于构建一个前端、HTML5的“原创”分享平台。能够为学习者提供一些资料，也为广大前端爱好者提供一个平台。HTML5学堂最初由两名讲师（利利和堡堡）创建，当前有多名HTML5讲师以及HTML5开发工程师组成。H5学堂中，主要涉及HTML与CSS、JavaScript、jQuery、AJAX等前端的基本的知识、HTML5的实例开发、JavaScript底层知识、类库、面试真题、相关技术、行业未来发展等。这里，将知识最通俗易懂的描述出来。我们希望HTML5学堂能够成为一个个性化的学习网站，为您提供最适合您的信息。</p>
<h2>HTML5学堂微信</h2>
<p>收罗HTML5与HTML5的相关技术。在这里有原创的HTML5、CSS3、JavaScript等前端知识，也有来自互联网的HTML5全新动态~HTML5学堂由几位讲师倾情打造，或许这里没有最牛的技术，但却将HTML5最浅显易懂的表达了出来。</p>
<h2>摩登足迹微信号</h2>
<p>当前你的智能手机,隐藏着哪些功能你不了解的功能,又有哪些优秀的生活软件?“狗带”“宝宝心里苦”到底什么意思?所有内容尽收于此.这里有智能手机的小用法,有各类优秀软件,也有那些你不了解的流行词汇.</p>
</div>
<style>
.wrap {
padding: 15px 20px;
max-width: 640px;
margin: 0 auto;
}
.wrap > h2 {
padding: 10px 0;
color: #39f;
font-size: 24px;
}
.wrap > p {
line-height: 40px;
font-size: 18px;
}
</style>
<script>
var ls = window.localStorage;
// 页面每次加载的时候获取本地存储里面的值
if (ls.getItem('sTop')) {
var oldStop = ls.getItem('sTop');
// 获取到的值来设置页面滚动条的位置
if (document.documentElement.scrollTop) {
document.documentElement.scrollTop = oldStop;
} else {
document.body.scrollTop = oldStop;
}
} else {
console.log('抱歉，找不到滚动条的值');
}
// 监听页面滚动条的状态（是否滚动）
window.addEventListener('scroll', function() {
// 滚动时获取页面滚动条的位置
var sTop = document.documentElement.scrollTop || document.body.scrollTop;
// 滚动条的位置保存到本地存储里面
ls.setItem('sTop', sTop);
}, false);
</script>
点击查看原文地址！
