文档章节

解决JPages分页插件,点击下一页不会自动回到顶部的bug

TerrySolar
 TerrySolar
发布于 2016/06/20 23:43
字数 558
阅读 83
收藏 0
 

最近在做一个手机端的失物招领系统,用到了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]    

本文转载自:http://terrylovesolar.com/fix-jpages-scroll-to-top-bug/

共有 人打赏支持
TerrySolar
粉丝 0
博文 13
码字总数 0
作品 0
珠海
分享一个jQuery的超酷分页插件 - jPages

日期:2012-4-18 来源:GBin1.com 在线演示 本地下载 jQuery的分页插件很多,但是大都的功能都比较简单,今天我们分享一个非常酷的分页插件 - jPages,拥有丰富的功能和特效,大家肯定会喜欢...

gbin1
2012/04/18
0
0
JQ利用jPages.js实现完美分页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta ht......

赵立成
2014/01/21
0
2
21 个最佳的 jQuery 翻页插件

jPages [ Demo || Download ] jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和滚动浏览,延迟显示以及完全可定制的导航面板。 Easy pagination with jQuery and Ajax [...

oschina
2013/05/14
10.4K
12
20 个 jQuery 分页插件和教程,附带实例

在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示。 1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和...

红薯
2012/04/04
14.4K
6
关于框架内网页返回顶部问题。fusion2.canvas.setScroll QQ开放平台。

现在有一个应用,当用户看完第一页的时候,点击下一页的时候。返回新的页面位置还是在之前位置上。没有到头部。用户必须用鼠标滚动才能到顶部。 普通网页格式是 Appqq.php?page=3#top 就可以...

谈老湿
2012/11/30
239
0

没有更多内容

加载失败,请刷新页面

加载更多

TypeScript基础入门之JSX(二)

转发 TypeScript基础入门之JSX(二) 属性类型检查 键入检查属性的第一步是确定元素属性类型。 内在元素和基于价值的元素之间略有不同。 对于内部元素,它是JSX.IntrinsicElements上的属性类型...

durban
21分钟前
0
0
AVA中CAS-ABA的问题解决方案AtomicStampedReference

了解CAS(Compare-And-Swap) CAS即对比交换,它在保证数据原子性的前提下尽可能的减少了锁的使用,很多编程语言或者系统实现上都大量的使用了CAS。 JAVA中CAS的实现 JAVA中的cas主要使用的是...

码代码的小司机
23分钟前
0
0
Android JNI开发系列(十三) JNI异常处理

JNI 异常处理 JNI异常与JAVA处理异常的区别 JAVA 有异常处理机制,而JNI没有 如果JAVA中异常没有捕获,后面的代码不会执行,JNI会执行 JAVA编译时的异常,是在方法显示的声明了某一个异常,编...

蔡小鹏
36分钟前
2
0
简单介绍Java 的JAR包、EAR包、WAR包区别

WAR包 WAR(Web Archive file)网络应用程序文件,是与平台无关的文件格式,它允许将许多文件组合成一个压缩文件。War专用于Web方面。大部分的JAVA WEB工程,都是打成WAR包进行发布的。 War是...

Linux就该这么学
今天
1
0
Qt那些事0.0.7

在帮助文档(Overview - QML and C++ Integration)中随缘遇到一张图,是关于C++对象与QML整合介绍的,值得标记下来,虽然大部分功能也有所涉猎,但是还是留个记号,万一哪天我失忆了还想写Q...

Ev4n
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部