h5列表页面 回到顶部+分页(仿京东app)

所属分类:UI-滚动

 26510  322  查看评论 (4)
分享到微信朋友圈
X
h5列表页面  回到顶部+分页(仿京东app) ie兼容9

说明:本插件功能时仿京东app回到顶部按钮做的,没有加数字特效请知悉

用法:      

1. 引入此插件前请先引入zepto.min.js 或 jquery.js

<script type="text/javascript" src="zepto.min.js"></script>

2. 

var page_instance = $('#your-gotop-dom-id').pageination({
    //  是否一直显示
    always: false,
    //   分页开始时的高度,达到高度时才显示分页,如果always未true,则一直显示
    startPos: 300,
    // 步进高度,每滚动这个高度当前页码加减 1
    stepHeight: 700,
    // 总页数,必传
    total: 5,
    // 分页图标变成回到顶部图标的时间,当前页为第一页时,回到顶部图标从显示到消失时间
    time: 1000
});
  • page_instance 实例,对象,包含你传的参数,作用的dom对象以及两个函数:

  • updateTotal:变更总页码

  • updateCul:变更当前页码

相关插件-滚动

jQuery鼠标滚屏锚点定位

利用mousewheel库实现滚屏事件,同时支持侧边栏控制
  滚动
 32509  392
  滚动
 38039  360

向下滚动加载动画特效插件AOS

向下滚动网页加载动画特效插件AOS
  滚动
 37416  435

苹果applewatch界面

苹果applewatch界面
  滚动
 28044  339

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    黄河爱浪 0
    2018/8/1 11:35:55
    蛮有特点的,不过呢。代码上,调用方式不应该放在你的JS中,应该放到HTML文件中让用户调用,不应该放在你的插件源码中,还有,插件扩展函数传递 jQuery 对象会比 $ 要好些。
        慕牧木0
        2018/8/1 12:32:37
        感谢浪兄关注哈!想不太明白jQuery 比 $ 好在哪里呢,他们都是指向jquery对象的指针啊,而且zepto的话是没有jQuery全局变量的。
        黄河爱浪1
        2018/8/5 21:44:30
        也说不上那里好,反正书上这么写的哈哈。不过,感觉上 $ 很有可能被别的插件或者框架污染。所以用 jQuery 对象要好一丢丢。我看过的书上都是这么介绍的
        慕牧木0
        2018/8/8 10:13:16
        原来如此~受教了!
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复