html 列表页滚动后跳转，返回时停留在原来位置

最新推荐文章于 2023-08-14 09:50:41 发布

原创最新推荐文章于 2023-08-14 09:50:41 发布 · 651 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一段JavaScript代码，利用onbeforeunload事件捕获浏览器滚动条的位置，并将其存储在cookie中。当页面重新加载时，通过读取cookie恢复滚动条位置，实现了跨页面的滚动状态保持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


		$(function(){
			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]); 
			    } 
			}
		})