頁面的div中有滾動條，js實現刷新頁面后回到記錄時滾動條的位置

　　當div中綁定數據，給它一個屬性overflow-y: scroll，添加長度大小，使其能夠出現滾動條；每次刷新的時候滾動條總是會出現在最上方，這使我很頭疼，經過查閱網上資料，返現兩種方法可行。如下：

第一種方案

　　將上一個頁面的div的scrolltop距離長度記錄在cookie中，然后通過js調整刷新頁面時的長度記錄，代碼如下：

js代碼：

 

<script>
        var _h = 0;
        function SetH(o) {
            _h = o.scrollTop
            SetCookie("a", _h)

        }
        window.onload = function () {
            document.getElementById("x").scrollTop = GetCookie("a");//頁面加載時設置scrolltop高度
        }
        function SetCookie(sName, sValue) {
            document.cookie = sName + "=" + escape(sValue) + "; ";
        }
        function GetCookie(sName) {

            var aCookie = document.cookie.split("; ");
            for (var i = 0; i < aCookie.length; i++) {
                var aCrumb = aCookie[i].split("=");
                if (sName == aCrumb[0])
                    return unescape(aCrumb[1]);
            }

            return 0;
        }
    </script>

 

 

 

 

html中代碼如下：

 

<div id="x" style="height: 200px; overflow: scroll" onscroll="SetH(this)">
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
        </div>

 

第二種方案

　　1.通過div的onscroll事件記錄滾動條的scrollTop值，設置到document.cookie
　　2.頁面加載時再讀取document.cookie的值，設置給div的scrollTop

js代碼實現：

 

<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>

 

html:

<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>