js记录滚动条位置，页面刷新滚动条位置不变

最新推荐文章于 2024-08-05 10:53:32 发布

原创最新推荐文章于 2024-08-05 10:53:32 发布 · 1.1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种在网页中保存和加载滚动条位置的方法，通过JavaScript监听滚动事件并将滚动位置保存到cookie中，当页面重新加载时，从cookie读取滚动位置并设置到指定的div元素上，实现滚动位置的记忆功能。

直接上代码

	<div class="content" data-role="tab-content"
			 data-id="course-a" runat="server" id="divContent"
			 style="height: 365px; overflow-y: scroll" onscroll="KeepScrollBar()">
			<p> 1</p>
			<p> 2</p>
			<p> 3</p>
			<p> 4</p>
			<p> 5</p>
			<p> 6</p>
			<p> 7</p>
			<p> 8</p>
			<p> 9</p>
			<p> 10</p>
			<p> 11</p>
			<p> 12</p>
			<p> 13</p>
			<p> 14</p>
			<p> 15</p>
			<p> 16</p>
		</div>

<script type="text/javascript">
			function KeepScrollBar() {
				var scrollPos;
				if(typeof window.pageYOffset != 'undefined') {
					scrollPos = window.pageYOffset;
				} else if(typeof document.body != 'undefined') {
					scrollPos = document.getElementById('divContent').scrollTop;
				}
				document.cookie = "scrollTop=" + scrollPos;
			}
			window.onload = function() {
				if(document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
					var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/);
					document.getElementById('divContent').scrollTop = parseInt(arr[1]);
				}
			}
		</script>