這是接續上一篇設定 infinite scorll 的，如果我們用的手機瀏覽的話，很快會發現一個問題，那就是如果我們在本頁滑動往下使用infinite scroll之後，點了其中任一連結，然後再"回上一頁"的時侯，會回不到點擊的正確位置。這個問題在於手機瀏覽器的讀取上一頁位置，是記錄所有資料長度的某個位置點。然而，infinite scroll 是分段載入，回上一頁只是回到某分段而已。所以，我們要做的事，是讓讓我們回上一頁的時侯，讓網頁一口氣讀入所有資料長度，而不要分段讀入，如此長度位置才會一樣。
以下黃色部份是原來的程式
php部份
$perPage = 10; /*每次讀10筆資料，$currentPage是目前資料*/
$rangeStart = ($currentPage - 1) * $perPage;
sql = SELECT `messageid` FROM mytable ORDER BY `messageid` DESC LIMIT $rangeStart, $perPage;
java部份
<script type="text/javascript">
$(document).ready(function(){
/*自動載入捲動項目*/
$(function() {
$('#contentserial').infinitescroll({
loading: {
finishedMsg : "<em>這已經是最後一個項目了.</em>",/*最後一頁顯示的字*/
msgText : "<em>載入更多項目...</em>",/*自動載入中的暫時顯示的字*/
speed : 'fast',/*載入速度*/
},
state: {
currPage: <?php echo $currentPage;//目前網頁。很多教學在此用預設值1，但因為如果有人從pageID=2開始，就不能從1數了，故用可變動參數較好。 我用php的PEAR模組的 pager套件指定一個參數目前網頁表示$currentPage然後預設是1，但仍可以自由變動，在這裏網友們也可以不靠套件手動指定，PEAE的 pager套件就不多解釋，它只是一種換頁的套件，網友們可自行寫其他程式替代這個$currentPage參數 ?>
},
navSelector : "#nextscroll:last",/*讀入下一網頁的連結，稍後解釋*/
nextSelector : "a#nextscroll:last",/*讀入下一網頁的連結，稍後解釋*/
itemSelector : "#contentserial li", /*你要讀入的內容物是什麼，在此例子是讀入下一頁的li，並插入#contentserial裏面*/
maxPage : <?php $totalnumpages = $pager->numpages(); if ($totalnumpages < 1) $totalnumpages = '1'; echo $totalnumpages; //網頁多最是幾頁。在此我用PEAE pager內建的總頁數計算功能，指定參數為$totalnumpages，至少為1。網友在此可以寫其他程式來自行計算，可以不用照抄，照抄的話，因為你沒有用pager套件，所以也是無用的 ?>,
dataType : "php",/*檔案名稱*/
animate : false, /*動畫效果。這個一定要取消，否則在有資料庫多欄讀入的網頁會出錯，會亂跳*/
extraScrollPx : 0, /*刷入新網頁後，要自動往上移多少空間，我選擇不要*/
pixelsFromNavToBottom : 30, /*距離滑到最底部的距離多少時要開始啟動，在此指定30px*/
path: function(index) {/*path是infinite scroll內建的下一頁換頁功能，這邊有點複雜，很重要！！！*/
<?php
if (empty($_GET['pageID']))/*沒有PageID時，比如 test.php?o=t ，補上為test.php?o=t&pageID= */
$nextscrollpage_path = $_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'].'&pageID=';
else {/*如果有pageID了，舉例第3頁，那麼要把pageID=3的3給刪除掉，用str_replace功能去跑，比如test.php?o=t&pageID=3 要替換為 test.php?o=t&pageID= */
$nextscrollpage_path = $_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'];
$nowpageID_path = '&pageID='.$_GET['pageID'];
$nextscrollpage_path = str_replace($nowpageID_path,'&pageID=',$nextscrollpage_path);
}
?>
return "<?php echo $nextscrollpage_path; ?>" + index; /*index原理是根據目前state:currPage的頁數自動+1，這是infinite scroll內建的自動累加功能。所以舉例第3頁產生的網頁下一頁參數會是4(index)，下一頁就是test.php?o=t&pageID=4*/
}
});
});
});
</script>
在新網頁讀入之後，在網址加入pageSUM=1這個參數，然後當我們回上一頁的時侯，一讀到pageSUM=1，就表示資料不要分段讀取，要一口氣從頭開始讀入多頁資料到那裏去
php部份
$perPage = 10; /*每次讀10筆資料，$currentPage是目前資料*/
$rangeStart = ($currentPage - 1) * $perPage;
if ($_GET['pageSUM']==1){
$rangeStart = 0;
$perPage = $currentPage * $perPage;
}
sql = SELECT `messageid` FROM mytable ORDER BY `messageid` DESC LIMIT $rangeStart, $perPage;
java部份
<script type="text/javascript">
$(document).ready(function(){
/*自動載入捲動項目*/
$(function() {
$('#contentserial').infinitescroll({
loading: {
finishedMsg : "<em>這已經是最後一個項目了.</em>",/*最後一頁顯示的字*/
msgText : "<em>載入更多項目...</em>",/*自動載入中的暫時顯示的字*/
speed : 'fast',/*載入速度*/
},
state: {
currPage: <?php echo $currentPage;//目前網頁。很多教學在此用預設值1，但因為如果有人從pageID=2開始，就不能從1數了，故用可變動參數較好。 我用php的PEAR模組的 pager套件指定一個參數目前網頁表示$currentPage然後預設是1，但仍可以自由變動，在這裏網友們也可以不靠套件手動指定，PEAE的 pager套件就不多解釋，它只是一種換頁的套件，網友們可自行寫其他程式替代這個$currentPage參數 ?>
},
navSelector : "#nextscroll:last",/*讀入下一網頁的連結，稍後解釋*/
nextSelector : "a#nextscroll:last",/*讀入下一網頁的連結，稍後解釋*/
itemSelector : "#contentserial li", /*你要讀入的內容物是什麼，在此例子是讀入下一頁的li，並插入#contentserial裏面*/
maxPage : <?php $totalnumpages = $pager->numpages(); if ($totalnumpages < 1) $totalnumpages = '1'; echo $totalnumpages; //網頁多最是幾頁。在此我用PEAE pager內建的總頁數計算功能，指定參數為$totalnumpages，至少為1。網友在此可以寫其他程式來自行計算，可以不用照抄，照抄的話，因為你沒有用pager套件，所以也是無用的 ?>,
dataType : "php",/*檔案名稱*/
animate : false, /*動畫效果。這個一定要取消，否則在有資料庫多欄讀入的網頁會出錯，會亂跳*/
extraScrollPx : 0, /*刷入新網頁後，要自動往上移多少空間，我選擇不要*/
pixelsFromNavToBottom : 30, /*距離滑到最底部的距離多少時要開始啟動，在此指定30px*/
history : false, /* 關閉插件的預設歷史記錄處理 */
path: function(index) {/*path是infinite scroll內建的下一頁換頁功能，這邊有點複雜，很重要！！！*/
<?php
if (empty($_GET['pageID']))/*沒有PageID時，比如 test.php?o=t ，補上為test.php?o=t&pageID= */
$nextscrollpage_path = $_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'].'&pageID=';
else {/*如果有pageID了，舉例第3頁，那麼要把pageID=3的3給刪除掉，用str_replace功能去跑，比如test.php?o=t&pageID=3 要替換為 test.php?o=t&pageID= */
$nextscrollpage_path = $_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'];
$nowpageID_path = '&pageID='.$_GET['pageID'];
$nextscrollpage_path = str_replace($nowpageID_path,'&pageID=',$nextscrollpage_path);
//以免重覆，因為不斷的來回點擊之下，有可pageSUM會被加載過
$nextscrollpage_path = str_replace('&pageSUM=1','',$nextscrollpage_path);
}
?>
return "<?php echo $nextscrollpage_path; ?>" + index; /*index原理是根據目前state:currPage的頁數自動+1，這是infinite scroll內建的自動累加功能。所以舉例第3頁產生的網頁下一頁參數會是4(index)，下一頁就是test.php?o=t&pageID=4*/
}
}, function(newElements, opts) {
// 加載新內容後的回調函數
var newPage = opts.state.currPage; // 獲取當前頁碼
var newUrl = "<?php echo $nextscrollpage_path; ?>" + newPage + "&pageSUM=1"; //新網址加載&pageSUM=1這個參數
// 更新目前瀏覽器網址列的內容，這樣用上一頁回去時，就會讀到pageSUM這參數了
window.history.pushState({ page: newPage }, '', newUrl);
});
});
});
</script>
