網頁重新整理或者重新載入後捲軸的位置不變

       在開發的過程中我們經常需要重新載入或者重新整理某個畫面，已確保資料顯示是最新的。但是如果一丁點改變就重新整理畫面的話，會導致使用者體驗很差，想想看你好不容易把網頁拖到最後，結果點擊某個按鈕的時候，又跑到頂端；或者網頁內容很多，你在網頁的某個地區進行操作，操作完畢後卻回到頂端，再次操作的時候還得找到那個地區。

      有兩種方法可以解決這個問題：ajax部分重新整理或者重新整理後捲軸位置不變。這裡我們先不說ajax的方法，因為在開發過程中可能受需求的限制，你並不需要用ajax的方法。那麼如何才能實現網頁重新整理或者重新載入後捲軸的位置不變那？

我們可以在沒有重新整理之前儲存當前捲軸的位置，然後在網站載入的時候讀取儲存的捲軸位置。這裡需要用到window.onbeforeunload()、window.onload()兩個方法，具體代碼和實現方式如下：

function window.onbeforeunload(){
    var scrollPos;   
    if (typeof window.pageYOffset != 'undefined') {
       scrollPos = window.pageYOffset;
    }
    else if (typeof document.compatMode != 'undefined' &&
         document.compatMode != 'BackCompat') {
       scrollPos = document.documentElement.scrollTop;
    }
    else if (typeof document.body != 'undefined') {
       scrollPos = document.body.scrollTop;
    }
    document.cookie="scrollTop="+scrollPos; //儲存捲軸位置到cookies中
    }

function window.onload()
{
    if(document.cookie.match(/scrollTop=([^;]+)(;|$)/)!=null){
        var arr=document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不為空白，則讀取捲軸位置
        document.documentElement.scrollTop=parseInt(arr[1]);
        document.body.scrollTop=parseInt(arr[1]);
    }
}