js實現重新整理頁面依然能夠使滾動條滾定在原來位置

螞蟻小編發表於2017-03-25
原文網址 : https://www.softwhy.com/article-4583-1.html
JS

大家知道你http協議是無狀態的，當重新整理網頁的時候，網頁之前的狀態不會保留，但是在實際應用中，可能有這樣的需求，就是保留原來滾動條的位置，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
#thediv{
  width:20px;
  height:1000px;
  background:green;
  margin:0px auto;
  font-size:14px;
  color:red;
  text-align:center
}
</style>
<script type="text/javascript"> 
window.onbeforeunload=function(){ 
  var scrollPos; 
  scrollPos=document.documentElement.scrollTop||document.body.scrollTop;
  document.cookie="scrollTop="+scrollPos; 
}
window.onload=function(){ 
  if(document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null){ 
    var arr=document.cookie.match(/scrollTop=([^;]+)(;|$)/); 
    document.documentElement.scrollTop = parseInt(arr[1]); 
    document.body.scrollTop = parseInt(arr[1]); 
  } 
} 
</script> 
</head>
<body>
<div id="thediv">螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來。</div>
</body>
</html>

程式碼採用cookie記錄重新整理之前滾動條的位置，效果必須要在伺服器環境下才能夠測試效果，下面介紹一下它的實現過程。

一.程式碼註釋:

1.window.onbeforeunload=function(){}，重新整理網頁的時候會觸發onbeforeunload事件，當然具有一定的瀏覽器相容性問題。

2.var scrollPos，宣告一個變數用來儲存滾動條的位置。

3.scrollPos=document.documentElement.scrollTop||document.body.scrollTop，獲取頁面向上滾動的尺寸。

4.document.cookie="scrollTop="+scrollPos，將向上滾動的尺寸寫入cookie。

5.window.onload=function(){}，文件內容完全載入完畢再去執行函式中的程式碼。

6.if(document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null)，如果存在對應的cookie內容。

7.var arr=document.cookie.match(/scrollTop=([^;]+)(;|$)/，生成一個陣列。

8.document.documentElement.scrollTop = parseInt(arr[1])，設定頁面向上滾動的尺寸，陣列的第二個元素就是正規表示式第一個字表示式匹配的內容，在這裡也就是"scrollTop="+scrollPos的scrollPos值。

9.document.body.scrollTop = parseInt(arr[1])，和上面同樣的道理，之所以8和9同時存在是為了瀏覽器相容性。

二.相關閱讀:

1.document.documentElement.scrollTop||document.body.scrollTop可以參閱document.body.scrollTop返回值為0解決方案一章節。 

2.cookie操作可以參閱javascript讀寫cookie操作簡單介紹一章節。 

3.match()函式可以參閱正規表示式match()函式一章節。

4.parseInt()函式可以參閱javascript parseInt()一章節。 

相關文章