頁面刷新時記住滾動條的位置jquery代碼
更新時間：2014年06月17日 09:04:36 投稿：whsnow
這篇文章主要介紹了點擊按鈕頁面刷新的時候 記住滾動條的位置,需要的朋友可以參考下
@*點擊按鈕頁面刷新的時候 記住滾動條的位置*@
<script type="text/javascript">
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]);
}
}
</script>
復(fù)制代碼 代碼如下:
<script type="text/javascript">
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]);
}
}
</script>
您可能感興趣的文章:
- jQuery彈出層后禁用底部滾動條(移動端關(guān)閉回到原位置)
- jQuery實現(xiàn)將div中滾動條滾動到指定位置的方法
- jquery 點擊元素后,滾動條滾動至該元素位置的方法
- jQuery實現(xiàn)定位滾動條位置
- jQuery實現(xiàn)根據(jù)滾動條位置加載相應(yīng)內(nèi)容功能
- 使用jQuery判斷瀏覽器滾動條位置的方法
- 通過JQuery將DIV的滾動條滾動到指定的位置方便自動定位
- jQuery判斷div隨滾動條滾動到一定位置后停止
- JS和JQUERY獲取頁面大小,滾動條位置,元素位置(示例代碼)
- JQuery獲取元素文檔大小、偏移和位置和滾動條位置的方法集合
- jQuery實現(xiàn)滾動條滾動到子元素位置（方便定位）
相關(guān)文章
jquery實現(xiàn)的一個導(dǎo)航滾動效果具體代碼
首頁有一個導(dǎo)航頁面要實現(xiàn)滾動效果，索性就仿造別人的效果自己做了一個，大體上還行，看起來還是比較流暢的,現(xiàn)滾動效果，腳本代碼如下，感興趣的朋友可以參考下2013-05-05
淺談$(document)和$(window)的區(qū)別
本人在做項目的時候遇到$(document)，$(window)這兩種寫法立馬讓我蒙圈了，那么他們的區(qū)別是什么呢，在網(wǎng)友的幫助下，徹底了解了他們的區(qū)別，這里分享給大家。2015-07-07
這篇文章主要介紹了jQuery實現(xiàn)底部浮動窗口效果,涉及jQuery事件響應(yīng)及頁面元素動態(tài)變換的相關(guān)操作技巧,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了jQuery事件綁定用法,結(jié)合多個實例較為詳細的分析了常見的jQuery事件綁定實現(xiàn)技巧與使用方法,需要的朋友可以參考下2016-09-09
2012-10-10
jquery實現(xiàn)的讓超出顯示范圍外的導(dǎo)航自動固定屏幕最頂上
經(jīng)常會遇到這樣的情況，當頁面展示內(nèi)容過長時，想點導(dǎo)航切換欄目，就得把滾動條拉回到頂上，這樣操作總不太人性化，能不能讓導(dǎo)航超出顯示范圍外時自動貼在屏幕最頂上呢？答案肯定是能的。如果不太明白，把滾動條拉到下面點，看下我博客是效果就明白了。2011-09-09
這篇文章介紹了jquery彈出關(guān)閉遮罩層實例，有需要的朋友可以參考一下2013-08-08
這篇文章主要介紹了jquery+css3實現(xiàn)會動的小圓圈效果,涉及jquery基于時間函數(shù)動態(tài)操作頁面元素css3樣式的相關(guān)技巧,需要的朋友可以參考下2016-01-01
各式各樣的導(dǎo)航條效果css3結(jié)合jquery代碼實現(xiàn)
這篇文章主要為大家分享了css3結(jié)合jquery代碼實現(xiàn)各式各樣的導(dǎo)航條效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了jquery實現(xiàn)表單輸入時提示文字滑動向上效果,涉及jquery鼠標事件響應(yīng)及頁面元素樣式的動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08