解决JPages分页插件,点击下一页不会自动回到顶部的bug
解决JPages分页插件,点击下一页不会自动回到顶部的bug
TerrySolar 发表于2年前
解决JPages分页插件,点击下一页不会自动回到顶部的bug
  • 发表于 2年前
  • 阅读 75
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

 

最近在做一个手机端的失物招领系统,用到了JPages这个分页插件。

先简单介绍一下JPages:
jPages是一个客户端分页插件,它比其他大多数插件多了很多功能,比如自动翻页,滚动浏览,显示延迟,完全可定制的导航面板也集成项目与Animate.css和延迟加载。

兼容所有的浏览器

分页的基本功能都很容易实现,只需要几行代码就行。 [html] <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> [/html] [html] <body> <!-- 导航栏 --> <div class="holder"></div> <!-- 内容容器 (不一定要是ul标签)--> <ul id="itemContainer"> <!-- 需要分页的内容 --> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li>     ... </ul> </body> [/html] 启动插件: [javascript] $(function(){ $("div.holder").jPages({ containerID : "itemContainer" }); }); [/javascript] 效果如图: 示例
按照正常的用户体验,页码导航应该是放在当前页面的最低端,这样用户浏览完本页之后可以直接点击下一页,但是使用过程中发现,点击下一页之后页面的默认位置是停留在第二页的最底部,需要用户自己滚动到最顶端进行浏览,这样的设置确实挺糟糕。

为了防止其他开发者出现同样的困扰,我分享一种自己的解决方案:

[javascript] $(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 }); }); [/javascript]    
共有 人打赏支持
粉丝 0
博文 13
码字总数 0
×
TerrySolar
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: