文档章节

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

TerrySolar
 TerrySolar
发布于 2016/06/20 23:43
字数 558
阅读 324
收藏 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
珠海
私信 提问
加载中

评论(0)

分享一个jQuery的超酷分页插件 - jPages

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

gbin1
2012/04/18
934
0
CSDN找了好几天都人回答我的问题,祈求开源中国顺利帮我解决问题,请问下jpages有没有最全的分页

http://www.oschina.net/search?scope=project&q=jpages 我找了个这个,但是这个不全 谁能帮帮我弄下,拜托大神们了。 这个有缺点就是 没有显示当前页面 页数总数 还有数量总数 每页显示数量...

赵立成
2014/01/21
1.6K
18
2月份热门的 24 个 jQuery 插件

1. turn.js turn.js 是一个实现类似书本翻页的网页效果的JS库。 2. jQuery Scroll Path It's a plugin for defining custom scroll paths. It uses canvas flavored syntax to draw lines a......

红薯
2012/03/01
2.7K
5
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
6.2K
2
jQuery.bsgrid 1.21 发布 简单易用的jQuery Grid插件

jQuery.bsgrid 简单易用的jQuery Grid插件 jquery bsgrid,A simple jQuery Grid plugin with pagation, export and easy to expand. 一个简单易用的jQuery Grid插件,支持分页或不分页,支持......

bs2004
2014/10/17
7.4K
17

没有更多内容

加载失败,请刷新页面

加载更多

为什么中国开发不出流行的操作系统和编程语言

为什么中国开发不出流行的操作系统和编程语言 Stitch/2020-2-21 引子 知乎有两个帖子很有意思, 中国能不能写出操作系统? 中国为什么没有自己的编程语言 看了很多回到,有的答案写的很认真,...

osc_oq0m8kxk
30分钟前
33
0
干货,比较全面的c#.net公共帮助类(Common.Utility)

Common.Utility 初衷 网上有各式各样的帮助类,公共类,但是比较零碎,经常有人再群里或者各种社交账号上问我有没有这个helper, 那个helper,于是萌生了收集全部helper的念头,以便日后使用....

osc_qedw9vk0
31分钟前
5
0
flutter开发如何修改APP的名称和图标

1.安卓 2.修改APP名,不是软件里面显示的,而是桌面上应用名称 路径 /android/app/src/main/AndroidManifest.xml android:label="flutterapp" 改换这里的值 3.修改APP图标 路径 /android/app......

一代码农码一代
32分钟前
21
0
PDF文件水印怎么去掉?迅捷PDF编辑器PC的操作方法

PDF文件水印怎么去掉?现在PDF文件被广泛应用于各个办公场景之中,PDF文件的修改也是我们经常讨论的话题。编辑文件时,我们需要使用pdf编辑器。那么,如果文件中有水印,如何删除水印?应该有...

玛哈菲亚
32分钟前
23
0
基于 abp vNext 和 .NET Core 开发博客项目 - 用AutoMapper搞定对象映射

上一篇文章(https://www.cnblogs.com/meowv/p/12961014.html)集成了定时任务处理框架Hangfire,完成了一个简单的定时任务处理解决方案。 本篇紧接着来玩一下AutoMapper,AutoMapper可以很方便...

osc_tzzfwr6n
33分钟前
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部