通過JS記錄滾動(dòng)條位置

2012/11/9 19:09:31作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

通過JS記錄滾動(dòng)條位置

【實(shí)例描述】

當(dāng)頁(yè)面刷新時(shí)窗體中所有的內(nèi)容會(huì)被重新初始化，但一些讀書網(wǎng)站為了還原用戶刷新前查看的內(nèi)容，必須記錄窗體滾動(dòng)條的位置。本例介紹如何記錄滾動(dòng)條的位置。

【實(shí)例代碼】

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

【運(yùn)行效果】

記錄滾動(dòng)條位置運(yùn)行效果

【難點(diǎn)剖析】

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

【源碼下載】

為了JS代碼的準(zhǔn)確性，請(qǐng)點(diǎn)擊：通過JS記錄滾動(dòng)條位置進(jìn)行本實(shí)例源碼下載

標(biāo)簽： JS記錄滾動(dòng)條