最近在做一个手机端的失物招领系统，用到了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"></script>
<script src="js/jPages.js"></script>
</head>
<body>
<!– 导航栏 –>
<div class="holder"></div>
<!– 内容容器 (不一定要是ul标签)–>
<ul id="itemContainer">
<!– 需要分页的内容 –>
<li>…</li>
<li>…</li>
<li>…</li>
<li>…</li>
<li>…</li>
…
</ul>
</body>启动插件：
$(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
});
});
430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
