當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > 通過JS記錄滾動條位置

通過JS記錄滾動條位置

2012/11/9 19:09:31作者：佚名來源：網絡

移動端

【實例名稱】

通過JS記錄滾動條位置

【實例描述】

當頁面刷新時窗體中所有的內容會被重新初始化，但一些讀書網站為了還原用戶刷新前查看的內容，必須記錄窗體滾動條的位置。本例介紹如何記錄滾動條的位置。

【實例代碼】

<HTML>
<HEAD>
<TITLE> 記錄滾動條位置 -學無憂（www.yzddtk.cn）</title>
<script language="javascript">
 function SetCookie(sName, sValue)
 {
  date = new Date();
  s = date.getDate();
  date.setDate(s+1);   //設置cookie的有效期
  document.cookie = sName + "=" + escape(sValue) + "; 
expires=" + date.toGMTString();//創建cookie
 }
 function GetCookie(sName)
 {
  var aCookie = document.cookie.split("; "); 
//將cookie中的數據切割成數組，方便遍歷
  for (var i=0; i < aCookie.length; i++)      
//遍歷cookie中的數據
  {
  var aCrumb = aCookie[i].split("=");         
//將鍵和值分開
  if (sName == aCrumb[0]) {                   
//判斷是否是指定的鍵
   return unescape(aCrumb[1]);}            
//返回鍵對應的值
  }
  return null;
 }
 function winLoad()
 {
  document.body.scrollLeft = GetCookie("scrollLeft");
//獲取水平滾動條位置
  document.body.scrollTop = GetCookie("scrollTop");  
//獲取垂直滾動條位置
 }
 function winUnload()
 {
  SetCookie("scrollLeft", document.body.scrollLeft)  
//保存水平滾動條位置
  SetCookie("scrollTop", document.body.scrollTop)    
//保存垂直滾動條位置
 }
 window.onload = winLoad;                               
//加載頁面時自動執行獲取cookie保存值的方法
 window.onunload = winUnload;                           
//關閉頁面時自動執行保存cookie的方法
</script>
</HEAD>
<BODY>
測試行，主要為了出線滾動條<p></p>
測試行，主要為了出線滾動條<p></p>
測試行，主要為了出線滾動條<p></p>
測試行，主要為了出線滾動條<p></p>
測試行，主要為了出線滾動條<p></p>
測試行，主要為了出線滾動條<p></p>
測試行，主要為了出線滾動條<p></p>
測試行，主要為了出線滾動條<p></p>
測試行，主要為了出線滾動條<p></p>
測試行，主要為了出線滾動條<p></p>
</BODY>
</HTML>

【運行效果】

記錄滾動條位置運行效果

【難點剖析】

本例的重點是如何保存滾動條的位置。頁面中的滾動條分為水平滾動條和垂直滾動條。水平滾動條的位置使用“document．body．scrollLeft”獲取，垂直滾動條的位置使用“document．body．scrollTop”獲取。保存滾動條位置使用的是Cookie，關于Cookie的操作可參考代碼中的“SetCookie”和“GetCookie”方法。

【源碼下載】

為了JS代碼的準確性，請點擊：通過JS記錄滾動條位置進行本實例源碼下載

標簽：滾動條

上一篇：筆記本屏幕反光怎么辦
下一篇：電腦速度慢怎么辦，怎樣讓電腦速度變快

相關文章

熱門軟件/ 推薦游戲/ 手機軟件

資訊分類

Dreamweaver Flash DIV+CSS 編程其他

推薦教程

精品軟件推薦

360安全衛士

訊飛輸入法

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频视频,欧美一级特黄录像视频