微信瀏覽器自帶的返回上一頁的停留位置
阿新 • • 發佈:2019-02-18
我們做過微信的應該都知道,微信自帶的返回上一頁,就是重新開啟頁面。並不是返回歷史頁面。我們PC端的瀏覽器是返回歷史頁面。點選返回頁面之後 上一個頁面的scrollTop還是之前沒有進入新頁面的位置。
解決辦法:利用sessionStorage HTML5本地儲存 進行儲存位置scrollTop以及載入了多少次ajax次數 微信返回上一頁(當前頁面)之後。就會onload一下。設定最後一次scrollTop的值。以及一次性通過ajax傳遞之前載入的次數size渲染頁面。這樣在微信裡面就可以實現和PC一樣的效果。
簡易程式碼如下:
var curPage = 1; //當前頁碼 window.onload = function() { <span style="white-space:pre"> </span>if(window.sessionStorage){ <span style="white-space:pre"> </span>var top = parseInt(sessionStorage.getItem("top")); <span style="white-space:pre"> </span>var size = parseInt(sessionStorage.getItem("size")); top = top?top:0; size = size?size:1; for (var i = 1; i <= size; i++){ <span style="white-space:pre"> </span>//此處呼叫ajax填充資料 }; document.body.scrollTop = top; } } $(window).scroll(function(){ <span style="white-space:pre"> </span>totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); <span style="white-space:pre"> </span>var tops=document.body.scrollTop; <span style="white-space:pre"> </span>if(window.sessionStorage){ <span style="white-space:pre"> </span>sessionStorage.setItem("top",tops); <span style="white-space:pre"> </span>sessionStorage.setItem("size",curPage); <span style="white-space:pre"> </span>} });