1. 程式人生 > >微信瀏覽器自帶的返回上一頁的停留位置

微信瀏覽器自帶的返回上一頁的停留位置

我們做過微信的應該都知道,微信自帶的返回上一頁,就是重新開啟頁面。並不是返回歷史頁面。我們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>}
});