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設置網頁刷新或者重新加載后滾動條的位置不變 js實現div滾動條在頁面刷新滾動條位置固定 JQuery實現頁面刷新滾動條自動滾動到特定位置 JavaScript--獲取滾動條位置，並實現頁面滑動到錨點位置 JS實現刷新頁面后回到記錄時滾動條的位置頁面的div中有滾動條，js實現刷新頁面后回到記錄時滾動條的位置頁面的div中有滾動條，js實現刷新頁面后回到記錄時滾動條的位置 js禁止滾動條滾動，並且滾動條不消失，頁面大小不變頁面滾動條位置觸發事件 JavaScript控制滾動條滾動到指定位置