亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

js實現(xiàn)刷新頁面后回到記錄時滾動條的位置【兩種方案可選】

 更新時間:2016年12月12日 11:02:46   作者:edisoner  
本文主要介紹了頁面的div中有滾動條,js實現(xiàn)刷新頁面后回到記錄時滾動條的位置的兩種方案,需要的朋友可以看下

當(dāng)div中綁定數(shù)據(jù),給它一個屬性overflow-y: scroll,添加長度大小,使其能夠出現(xiàn)滾動條;每次刷新的時候滾動條總是會出現(xiàn)在最上方,這使我很頭疼,經(jīng)過查閱網(wǎng)上資料,返現(xiàn)兩種方法可行。如下:

第一種方案

將上一個頁面的div的scrolltop距離長度記錄在cookie中,然后通過js調(diào)整刷新頁面時的長度記錄,代碼如下:

js代碼:

<script>
  var _h = 0;
  function SetH(o) {
   _h = o.scrollTop
   SetCookie("a", _h)
  }
  window.onload = function () {
   document.getElementById("x").scrollTop = GetCookie("a");//頁面加載時設(shè)置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值,設(shè)置到document.cookie

2.頁面加載時再讀取document.cookie的值,設(shè)置給div的scrollTop

js代碼實現(xiàn):

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

以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!

相關(guān)文章

  • javascript 窗口加載蒙板 內(nèi)嵌網(wǎng)頁內(nèi)容

    javascript 窗口加載蒙板 內(nèi)嵌網(wǎng)頁內(nèi)容

    用于在現(xiàn)有窗口上加載蒙板,在蒙板內(nèi)在嵌入其他頁面內(nèi)容
    2010-11-11
  • 如何在selenium中使用js實現(xiàn)定位

    如何在selenium中使用js實現(xiàn)定位

    這篇文章主要介紹了如何在selenium中使用js實現(xiàn)定位,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-08-08
  • ES6數(shù)組復(fù)制和填充方法copyWithin()、fill()的具體使用

    ES6數(shù)組復(fù)制和填充方法copyWithin()、fill()的具體使用

    本文主要介紹了ES6數(shù)組復(fù)制和填充方法copyWithin()、fill()的具體使用,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • 基于JS實現(xiàn)新聞列表無縫向上滾動實例代碼

    基于JS實現(xiàn)新聞列表無縫向上滾動實例代碼

    當(dāng)新聞較多,并且空前有限的時候,使用滾動是一個不錯的選擇,本章節(jié)就通過代碼實例介紹一下如何實現(xiàn)此效果,對無縫向上滾動實例代碼感興趣的朋友一起學(xué)習(xí)吧
    2016-01-01
  • JS數(shù)組扁平化(flat)方法總結(jié)詳解

    JS數(shù)組扁平化(flat)方法總結(jié)詳解

    這篇文章主要介紹了JS數(shù)組扁平化(flat)方法總結(jié)詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,,需要的朋友可以參考下
    2019-06-06
  • JavaScript實現(xiàn)彩虹文字效果的方法

    JavaScript實現(xiàn)彩虹文字效果的方法

    這篇文章主要介紹了JavaScript實現(xiàn)彩虹文字效果的方法,涉及javascript操作文字樣式的技巧,非常具有實用價值,需要的朋友可以參考下
    2015-04-04
  • JS數(shù)組方法push()、pop()用法實例分析

    JS數(shù)組方法push()、pop()用法實例分析

    這篇文章主要介紹了JS數(shù)組方法push()、pop()用法,結(jié)合實例形式分析了JavaScript數(shù)組push()與pop()方法基本功能、原理、使用方法與操作注意事項,需要的朋友可以參考下
    2020-01-01
  • IE JS無提示關(guān)閉窗口不提示的方法

    IE JS無提示關(guān)閉窗口不提示的方法

    好多情況下,用戶想關(guān)閉頁面不需要提示,提高用戶體驗,下面的代碼經(jīng)腳本之家測試通過。
    2010-04-04
  • 在表單提交前進行驗證的幾種方式整理

    在表單提交前進行驗證的幾種方式整理

    為了減輕后臺壓力,可以利用JavaScript在表單提交前對表單數(shù)據(jù)進行驗證,本文整理了常用的幾種方式,有需求的朋友可以參考下
    2013-07-07
  • js實現(xiàn)簡單計算器

    js實現(xiàn)簡單計算器

    一個簡潔的網(wǎng)頁JS計算器,附詳細代碼釋義。通過下邊的效果演示就可以看到,這是一個挺小的js網(wǎng)頁計算器,界面美化的我想還是不錯的,畢竟在沒有使用任何圖片修飾的情況下,很好看,而且功能挺實用,可以完成基本的數(shù)學(xué)算數(shù)運算。
    2015-11-11

最新評論