編頁重整 Scroll Bar捲軸 position 回到原來的位置 Javascript 程式碼

編頁重整 Scroll Bar捲軸 position 回到原來的位置 Javascript 程式碼

最近在寫一個網頁程式的時候，需要在頁面上提供統計報表圖型，結合了GOOGLE 的 CHART API可以產出很漂亮的表格，不過這個表格的位置剛好在整個頁面的下方處而且需要捲動SCROLLBAR，若是頁面動態REFRESH的時就又自己SCROLL 到TOP去了這時使用著要自己往下捲畫面很不方便。

因此在網路上找了很久的SOLUTION 終於找到一段JAVA SCRIPT CODE 可以用COOKIE的方式來保存目前的SCROLL BAR 位置，在下次REFRESH頁面或是REDIRCT 或是AHREF 網頁的時候仍然會把 scroll bar 下拉捲軸自動捲動至固定的位置，非常的好用只要把CODE直接放到你的程式碼的下方即可，執行的效果就是不管是網頁REFRESH或是RELOAD都可以記得原來SCROLLBAR的位置。

程式碼參考出處：點我查看


 <script type="text/javascript">
 function setPosCookies (){
 var scrollX, scrollY;
 // 儲存Scrollbar的位置 (x, y)
 if (document.all){
 if (!document.documentElement.scrollLeft)
 scrollX = document.body.scrollLeft;
 else
 scrollX = document.documentElement.scrollLeft;
 if (!document.documentElement.scrollTop)
 scrollY = document.body.scrollTop;
 else
 scrollY = document.documentElement.scrollTop;
 }else{
 scrollX = window.pageXOffset;
 scrollY = window.pageYOffset;
 }
 // 設定 Cookie, 名稱為頁面 http://yyyy/XXXX.php => 取XXXX用
var url = document.location.href;
 var x_name = url.substring(url.lastIndexOf('/')+1, url.lastIndexOf('.')) + "scrollX";
 var y_name = url.substring(url.lastIndexOf('/')+1, url.lastIndexOf('.')) + "scrollY";
 setCookie(x_name, scrollX);
 setCookie(y_name, scrollY);
 }
 function setCookie(c_name,value,expiredays){
 // 不指定expire date, 則離開browser, cookie即失效
var exdate = new Date();
 exdate.setDate(exdate.getDate()+expiredays);
 document.cookie = c_name+ "=" +escape(value)+
 ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
 }
 function getCookie(c_name){
 if (document.cookie.length>0){
 c_start=document.cookie.indexOf(c_name + "=");
 if (c_start!=-1){
 c_start=c_start + c_name.length+1;
 c_end=document.cookie.indexOf(";",c_start);
 if (c_end==-1) { c_end=document.cookie.length;}
 return unescape(document.cookie.substring(c_start,c_end));
 }
 }
 return "";
 }
 function checkCookie(){
 // 取得 Cookie => (x, y)座標
var url = document.location.href;
 var x_name = url.substring(url.lastIndexOf('/')+1, url.lastIndexOf('.')) + "scrollX";
 var y_name = url.substring(url.lastIndexOf('/')+1, url.lastIndexOf('.')) + "scrollY";
 var x = getCookie(x_name);
 var y = getCookie(y_name);
 if (y == null || y == "") { y = 0;}
 if (x == null || x == "") { x = 0;}
 window.scrollTo(0, y)
 }
 window.onload = checkCookie;
 window.onscroll = setPosCookies;
 window.onkeypress = setPosCookies;
 window.onclick = setPosCookies;
 </script>