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

第一種方案

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

js代碼：

?

<script>var _h = 0;function SetH(o) {_h = o.scrollTopSetCookie("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>

?

轉載于:https://www.cnblogs.com/edisoner/p/6006804.html

總結

以上是生活随笔為你收集整理的页面的div中有滚动条，js实现刷新页面后回到记录时滚动条的位置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。