JavaScript实现页面刷新滚动条位置不变(利用cookie)

时间:2020-12-07 06:55:51
实验环境:vs2015 asp.net(C#)

主要原理:

1.在页面滚动时或点击按钮时将当前滚动条位置记录到cookie[pos],

2.页面刷新或重载时查询cookie[pos]中的值是否存在,若存在根据该值给滚动条定位

.aspx文件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/MyStyleSheet.css" />
</head>
<body onscroll="aa()">
<form id="form1" runat="server">
<div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="aa()" />
<div style="height: 600px" runat="server">
</div>
<asp:Button ID="Button3" runat="server" Text="Button" OnClientClick="aa()" />
    </div>
   </form>
</body>
</html>

js代码

注意点:若页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement.scrollTop获取滚动条滚动高度,若页面没有DTD,即没指定DOCTYPE时,使用document.body.scrollTop获取滚动条高度。如果在页面制定了DTD时使用document.body.scrollTop则取值一直为0。

 <script>    
function getCookie(c_name) {
//从cookie中获取滚动条距离顶端位置
if (document.cookie.length > 0) {
var aCookie = document.cookie.split(";");
for (var i = 0; i < aCookie.length; i++) {
var aCrumb = aCookie[i].split("=");
if (aCrumb[0] == c_name) {
return unescape(aCrumb[1]);
}
}
}
return ""
}
function setCookie(c_name, value) {
//给cookie赋值
document.cookie = c_name + "=" + escape(value) + ";";
}
function aa() {
//页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement。
//页面没有DTD,即没指定DOCTYPE时,使用document.body。
setCookie("pos", document.documentElement.scrollTop)
}
function checkMe() {
      //给scrollTop赋值
if (getCookie("pos") != "") {
document.documentElement.scrollTop = getCookie("pos") + "px"
}
}
checkMe()
</script>