2. 程式人生 > >頁面重新整理的時候記住滾動條的位置

頁面重新整理的時候記住滾動條的位置

阿新 • • 發佈：2019-01-01

         知識點，1、滾動條滾動時候的方法（scrolltop）；2、cookie（瀏覽器或其它軟體存cookie）3、onbeforeunload ；4、window.onload。

相容性較好的程式碼如下：window.onbeforeunload = function() {                   var scrollPos;                   if(typeof window.pageYOffset != 'undefined') {                        scrollPos = window.pageYOffset;                   } else if(typeof document.compatMode != 'undefined' &&
                        document.compatMode != 'BackCompat') {                        scrollPos = document.documentElement.scrollTop;                   } else if(typeof document.body != 'undefined') {                        scrollPos = document.body.scrollTop;                   }                   document.cookie = "scrollTop=" + scrollPos; //儲存滾動條位置到cookies中
              }              window.onload = function() {                   if(document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {                        var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不為空，則讀取滾動條位置                         document.documentElement.scrollTop = parseInt(arr[1]);
                        document.body.scrollTop = parseInt(arr[1]);                   }              }主要的一點就是，利用了onbeforeunload 這個時間，在即將離開當前頁面（重新整理或者關閉）時執行JavaScript。其次就是得記住當前的頁面滑到了哪裡。不能用這個方法的瀏覽器就得用不同的辦法進行了。再次就是在頁面載入的時候進行滾動，滾動到我們想要去的地方。儲存的方法可以用本地儲存，也可以用cookie。

相關推薦

EasyUI頁面重新整理後滾動條沒有恢復到初始位置，已解決

如題，由於大部分瀏覽器都對滾動條的位置有記憶功能，當頁面重新整理後，如果希望滾動條的位置恢復到初始位置，即最頂端，應當在js中呼叫datagrid物件scrollTo（index）方法滾動到指定行。該

頁面重新整理的時候記住滾動條的位置

         知識點，1、滾動條滾動時候的方法（scrolltop）；2、cookie（瀏覽器或其它軟體存cookie）3、onbeforeunload ；4、window.onload。相容性較好

Asp.net 在重新整理或提交頁面後保持滾動條的位置

     網頁內容在較長時，每次回傳重新整理頁面或提交網頁時都會定位到最頂端，非常不利於使用者互動。      將Page.MaintainScrollPositionOnPostBack屬性值設定為

頁面重新整理或者回發後DIV的滾動條位置不變！

  當把資料放在div裡面，然後給div設定Scroll顯示，在頁面重新整理後或者是處理了某個按鈕的事件，這個時候div的滾動軸就會又回到起始位置，但想把滾動條記錄到重新整理前的位置！ 經過思考，以及網上查詢資訊，得到解決辦法： Js部分： <script type=

vue專案如何使頁面後退不重新整理，且還原滾動條位置

       新指令化管理滾動狀態地址https://blog.csdn.net/theoneEmperor/article/details/82669022(歡迎star)，滾動條儲存以及回退只需要一條指令，讓你為所欲為。    

vue 頁面切換的時候vuex記錄之前的滾動條位置

beforeRouteEnter (to, from, next) { let aScrollY = store.getters.aScrollY setTimeout(function () { window.scrollTo(0, aScrollY); }

Bootstrap Table 定時重新整理固定滾動條的位置

場景：一張內容很大的表格，每隔一段時間重新整理資料，使用者看資料的時候突然重新整理了，由於重新整理後滾動條彈到頂部，這時客戶再找剛才看的內容，就比較困難了，如何解決了？ 思路：首先獲取滾動條的位置，然後定時向後臺請求資料的時候，把獲取的滾動條的位置設成滾動到的位置。 主要程式碼： var

解決ajax區域性重新整理後，滾動條位置變化的問題

問題描述：網頁底部實現了點贊和收藏功能，給長篇文點贊並更新點 贊數量之後，滾動條回到網頁頂部。 修改之前： <a href="#" th:onclick="'javascript:updateNum('+${article.id}+')'" > <i clas

javascript 讀取滾動條位置，文件總高度，頁面高度，滾動條距離底端位置

javascript 讀取滾動條位置，文件總高度，頁面高度，滾動條距離底端位置 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g

winform DataGridView 重新整理，滾動條定位到上一次的位置

DataGridView  輸出列表，經常會用到滾動條。 在重新載入列表後，如果還要定位到上一次滾動條所在的位置，那下面的方法就能實現， 1  給DataGridView   繫結Scroll 事件。 2  Scroll 事件要做的事，分別記錄滾動條移動位置的數值。 用

document.documentElement.scrollTop(獲取滾動條位置)

而不是 cli 使用 位置 w3c scrolltop 標簽 如果 htm 要獲取當前頁面的滾動條縱坐標位置，用：document.documentElement.scrollTop;而不是：document.body.scrollTop;documentElement 對

Extjs列表刷新固定滾動條位置

extjs列表刷新固定滾動條位置Extjs列表在某些情況下，需要定時刷新，但是如果列表未進行分頁，一屏顯示不下時，無論滾動條當前在什麽位置，每次刷新時，總會返回到最頂層，但是需求又要求我們定位到當前位置，該如何處理呢？解決方法如下：var me = this; // gridvar gridEl = me.g

jQuery 監聽滾動條位置

滾動條事件 // 實時監聽元素的滾動事件 $(window).scroll(function(){ ... }); $(window).scrollLefft(); // 獲取滾動條位置 $(window).scrollTop(); $(window).scrollTop(200); //

js 控制滾動條位置

JS控制滾動條的位置： window.scrollTo(x,y); 豎向滾動條置頂(window.scrollTo(0,0); 豎向滾動條置底 window.scrollTo(0,document.body.scrollHeight) JS控制TextArea滾動條自動滾動到最下部

小程式scroll-view元件 設定橫向滾動條位置 scroll-left 無效問題

這個問題只是部分做資料互動時可能會碰到的問題,發現設定的 scroll-left="200" 沒有起作用. 原因:     一般在頁面載入時我們會請求資料,並渲染列表, 但是我們在標籤或者data中設定的scroll-left值會在資料渲染前賦值. 此時的scroll-

C# datagridview 這是滾動條位置

1、datagridview 設定 表格內容鋪滿，內容自動換行 dataGridView1.DefaultCellStyle.WrapMode = DataGridViewTriState.True; dgv.AutoSizeColumnsMode = DataGridViewAutoSizeColumns

獲取滾動條位置（相容）

相容性獲取滾動條位置 //滾動條位置 function GetPageScroll()  {  var x, y; if(window.pageYOffset)  {    // all ex

html滾動條使用，以及頁面有多個div塊，如何讓body頁面不使用滾動條，只在某個div內使用滾動條

滾動條基本知識： 建議比價華麗的頁面使用overflow:scroll這個樣式的滾動條，比較好看。 scrollbar屬性、樣式詳解 1． overflow內容溢位時的設定（設定被設定物件是否顯示滾動條） overflow-x水平方向內容溢位時的設定 ov

router切換頁面的時候滾動條怎樣自動滾動到頂部

// router/index.is const router = new VueRouter({   routes: [...],   scrollBehavior (to, from, savedP

DOM之獲取滾動條位置

在DOM中可以通過兩種方式獲取滾動條的位置，通過pageXOffset,pageYOffset,或者scrollLeft，scrollTop 直接上程式碼，如下： function getScrollOffsets(w) { //指定視窗，如果不指