javascript設置網頁刷新或者重新加載后滾動條的位置不變
有個同事說再javascript中你可以做任何你想做的事情,當時覺得不以為然,今天遇到個問題,就是頁面重新加載后總是回到頁面的頂部,如果客戶只想看到他想看到的部分是怎么變化的,這個體驗就好了。原本想象應該有頁面設置scroll之類的,沒有看到,在網上搜到一個方法就是在頁面加載前用cookie記錄滾動條的位置,加載之后從cookie中取回這個值再設置滾動條的位置,這個方法如此風騷。
window.onbeforeunload = function(){ 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中 } window.onload = function() { 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]); } }
作者:Tyler Ning
出處:http://www.rzrgm.cn/tylerdonet/
本文版權歸作者和博客園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,如有問題,請微信聯系冬天里的一把火
浙公網安備 33010602011771號