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>
 

相关文章