首頁 > 開發者 > JavaScript
轉載：利用本機存放區實現記錄捲軸的位置，轉載捲軸
在做項目的時候，希望給頁面添加一個功能，就是重新整理頁面之後捲軸還可以保持在重新整理之前的位置，方便使用者繼續瀏覽。查詢了相關資料之後看到一篇文章講得不錯，連結如下：
原文地址：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 </>
tips：頁面需要有一定的內容才能出現捲軸，否則觸發不了scroll事件。
2）滾動時擷取頁面捲軸的位置
代碼中解決了擷取捲軸位置的相容問題。
1 < type="text/java"> 2 var ls = window.localStorage; 3 ls.setItem('sTop', 200); 4 </>
3）捲軸的位置儲存到本機存放區裡面
使用本機存放區的setItem方法設定本機存放區的值。
1 < type="text/java"> 2 var ls = window.localStorage; 3 ls.setItem('sTop', 200); 4 </>
4）頁面每次載入的時候擷取本機存放區裡面的值
先判斷本機存放區裡面是否有記錄過頁面捲軸的值，如果有則擷取本機存放區的值，否則不進行操作。
1 < type="text/java"> 2 var ls = window.localStorage; 3 if (ls.getItem('sTop')) { 4 console.log(ls.getItem('sTop', 200)); 5 } else { 6 console.log('抱歉，找不到捲軸的值'); 7 } 8 </>
5）擷取到的值來設定頁面捲軸的位置
跟擷取捲軸位置一樣處理了瀏覽器安全色問題。
1 < type="text/java"> 2 if (document.documentElement.scrollTop) { 3 document.documentElement.scrollTop = 200; 4 } else { 5 document.body.scrollTop = 200; 6 } 7 </>
4、具體實現
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>HTML5Course - 利用本機存放區，記錄頁面瀏覽器的位置</title> 6 <link rel="stylesheet" type="text/css" href="http://css.h5course.cn/reset.css" /> 7 <style type="text/css"> 8 .wrap { 9 padding: 15px 0; 10 max-width: 640px; 11 margin: 0 auto; 12 } 13 .wrap > h2 { 14 padding: 10px 0; 15 color: #39f; 16 font-size: 24px; 17 } 18 .wrap > p { 19 line-height: 40px; 20 font-size: 18px; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="wrap"> 26 <h2>HTML5學堂官網</h2> 27 <p>HTML5學堂，致力於構建一個前端、HTML5的“原創”分享平台。能夠為學習者提供一些資料，也為廣大前端愛好者提供一個平台。HTML5學堂最初由兩名講師（利利和堡堡）建立，當前有多名HTML5講師以及HTML5開發工程師組成。H5學堂中，主要涉及HTML與CSS、Java、jQuery、AJAX等前端的基本的知識、HTML5的執行個體開發、Java底層知識、類庫、面試真題、相關技術、行業未來發展等。這裡，將知識最通俗易懂的描述出來。我們希望HTML5學堂能夠成為一個個人化的學習網站，為您提供最適合您的資訊。</p> 28 <h2>HTML5學堂</h2> 29 <p>收羅HTML5與HTML5的相關技術。在這裡有原創的HTML5、CSS3、Java等前端知識，也有來自互連網的HTML5全新動態~HTML5學堂由幾位講師傾情打造，或許這裡沒有最牛的技術，但卻將HTML5最淺顯易懂的表達了出來。</p> 30 <h2>摩登足跡號</h2> 31 <p>當前你的智能手機,隱藏著哪些功能你不瞭解的功能,又有哪些優秀的生活軟體?“狗帶”“寶寶心裡苦”到底什麼意思?所有內容盡收於此.這裡有智能手機的小用法,有各類優秀軟體,也有那些你不瞭解的流行詞彙.</p> 32 <h2>HTML5學堂官網</h2> 33 <p>HTML5學堂，致力於構建一個前端、HTML5的“原創”分享平台。能夠為學習者提供一些資料，也為廣大前端愛好者提供一個平台。HTML5學堂最初由兩名講師（利利和堡堡）建立，當前有多名HTML5講師以及HTML5開發工程師組成。H5學堂中，主要涉及HTML與CSS、Java、jQuery、AJAX等前端的基本的知識、HTML5的執行個體開發、Java底層知識、類庫、面試真題、相關技術、行業未來發展等。這裡，將知識最通俗易懂的描述出來。我們希望HTML5學堂能夠成為一個個人化的學習網站，為您提供最適合您的資訊。</p> 34 <h2>HTML5學堂</h2> 35 <p>收羅HTML5與HTML5的相關技術。在這裡有原創的HTML5、CSS3、Java等前端知識，也有來自互連網的HTML5全新動態~HTML5學堂由幾位講師傾情打造，或許這裡沒有最牛的技術，但卻將HTML5最淺顯易懂的表達了出來。</p> 36 <h2>摩登足跡號</h2> 37 <p>當前你的智能手機,隱藏著哪些功能你不瞭解的功能,又有哪些優秀的生活軟體?“狗帶”“寶寶心裡苦”到底什麼意思?所有內容盡收於此.這裡有智能手機的小用法,有各類優秀軟體,也有那些你不瞭解的流行詞彙.</p> 38 <h2>HTML5學堂官網</h2> 39 <p>HTML5學堂，致力於構建一個前端、HTML5的“原創”分享平台。能夠為學習者提供一些資料，也為廣大前端愛好者提供一個平台。HTML5學堂最初由兩名講師（利利和堡堡）建立，當前有多名HTML5講師以及HTML5開發工程師組成。H5學堂中，主要涉及HTML與CSS、Java、jQuery、AJAX等前端的基本的知識、HTML5的執行個體開發、Java底層知識、類庫、面試真題、相關技術、行業未來發展等。這裡，將知識最通俗易懂的描述出來。我們希望HTML5學堂能夠成為一個個人化的學習網站，為您提供最適合您的資訊。</p> 40 <h2>HTML5學堂</h2> 41 <p>收羅HTML5與HTML5的相關技術。在這裡有原創的HTML5、CSS3、Java等前端知識，也有來自互連網的HTML5全新動態~HTML5學堂由幾位講師傾情打造，或許這裡沒有最牛的技術，但卻將HTML5最淺顯易懂的表達了出來。</p> 42 <h2>摩登足跡號</h2> 43 <p>當前你的智能手機,隱藏著哪些功能你不瞭解的功能,又有哪些優秀的生活軟體?“狗帶”“寶寶心裡苦”到底什麼意思?所有內容盡收於此.這裡有智能手機的小用法,有各類優秀軟體,也有那些你不瞭解的流行詞彙.</p> 44 </div> 45 < typetype="text/java"> 46 var ls = window.localStorage; 47 // 頁面每次載入的時候擷取本機存放區裡面的值 48 if (ls.getItem('sTop')) { 49 var oldStop = ls.getItem('sTop'); 50 // 擷取到的值來設定頁面捲軸的位置 51 if (document.documentElement.scrollTop) { 52 document.documentElement.scrollTop = oldStop; 53 } else { 54 document.body.scrollTop = oldStop; 55 } 56 } else { 57 console.log('抱歉，找不到捲軸的值'); 58 } 59 // 監聽頁面捲軸的狀態（是否滾動） 60 window.addEventListener('scroll', function() { 61 // 滾動時擷取頁面捲軸的位置 62 var sTop = document.documentElement.scrollTop || document.body.scrollTop; 63 // 捲軸的位置儲存到本機存放區裡面 64 ls.setItem('sTop', sTop); 65 }, false); 66 </> 67 </body> 68 </html>
效果：
5、總結
利用本機存放區，記錄捲軸的位置，主要涉及了兩個主要技術點，一個點是捲軸的操作，另外一個點是本機存放區的操作。其實，這個功能還可以擴充到Tab切換裡面，記錄使用者點擊了哪一個Tab項，下次開啟的時候顯示上次開啟的Tab項。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
