解決JPages分頁外掛，點選下一頁不會自動回到頂部的bug
阿新 • • 發佈：2019-01-22
最近在做一個手機端的失物招領系統，用到了JPages這個分頁外掛。
先簡單介紹一下JPages：
jPages是一個客戶端分頁外掛，它比其他大多數外掛多了很多功能，比如自動翻頁，滾動瀏覽，顯示延遲，完全可定製的導航面板也整合專案與Animate.css和延遲載入。
分頁的基本功能都很容易實現，只需要幾行程式碼就行：
<head>
<link rel="stylesheet" href="css/jPages.css">
<script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"> 啟動外掛：
$(function(){
$("div.holder").jPages({
containerID : "itemContainer"
});
});效果如圖：
按照正常的使用者體驗，頁碼導航應該是放在當前頁面的最低端，這樣使用者瀏覽完本頁之後可以直接點選下一頁，但是使用過程中發現，點選下一頁之後頁面的預設位置是停留在第二頁的最底部，需要使用者自己滾動到最頂端進行瀏覽，這樣的設定確實挺糟糕。
為了防止其他開發者出現同樣的困擾，我分享一種自己的解決方案:
$(function(){
$("div.holder").jPages({
containerID : "itemContainer"
perPage : 7,
first : "首頁",
previous : "上一頁",
next : "下一頁",
last : "末頁",
callback : function (pages,items) {
//可以利用pages，items兩個引數獲取當前頁碼，item總數等資訊，大家可以自己試試~
$(‘body,html’).animate({scrollTop:0},1000); //使整個頁面回到頂部
}
//這段程式碼是JPages的啟動方法，裡面可以配置很多引數，例如每一頁顯示的個數，自定義按鈕的文字等等
//官方文件裡還提供了一種引數–CallBack，回撥方法，這個方法裡的內容會在每顯示一個新的分頁是時執行
//我們可以在這個CallBack方法中加一句滾動到頂部的語句，便可以修復點選下一頁不能回到頂部的小BUG
});
});