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

本文转载自查看原文 2018-02-25 20:36 1079

实验环境：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。

 1 <script>　　　　
 2         function getCookie(c_name) {
 3         //从cookie中获取滚动条距离顶端位置
 4             if (document.cookie.length > 0) {
 5                 var aCookie = document.cookie.split(";");               
 6                 for (var i = 0; i < aCookie.length; i++) {
 7                     var aCrumb = aCookie[i].split("=");
 8                     if (aCrumb[0] == c_name) {
 9                         return unescape(aCrumb[1]);
10                     }
11                 }                
12             }
13             return ""
14         }
15         function setCookie(c_name, value) {
16         //给cookie赋值
17             document.cookie = c_name + "=" + escape(value) + ";";
18         }
19         function aa() {
20             //页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。
21             //页面没有DTD，即没指定DOCTYPE时，使用document.body。
22             setCookie("pos", document.documentElement.scrollTop)
23         }
24         function checkMe() {
25 　　　　　　//给scrollTop赋值
26             if (getCookie("pos") != "") {
27                 document.documentElement.scrollTop = getCookie("pos") + "px"
28             }
29         }
30         checkMe()
31     </script>
32

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 javascript设置网页刷新或者重新加载后滚动条的位置不变页面的div中有滚动条，js实现刷新页面后回到记录时滚动条的位置 JavaScript控制滚动条滚动到指定位置 jQuery判断页面滚动条距离顶端位置给页面添加滚动条页面添加滚动条 css设置子元素相对于父元素保持位置不变（含有滚动条的父元素） jQuery控制页面滚动条上下滚动 TreeView控件如何控制滚动条的位置 vue 返回记住滚动条位置