仿淘宝、京东等电商网站楼层跳转滚动定位

所属分类:UI-滚动

 19923  316  查看评论 (8)
分享到微信朋友圈
X
仿淘宝、京东等电商网站楼层跳转滚动定位 ie兼容7

第一,整合页面结构(html+css)

第二,引入floor.js,传入参数

/*     
    totop  //返回顶部按钮     
    fixedevery   // 左侧固定导航的每一项     louceng  //模块的每一项     header   //头部     */
$(function() {
    var obj = new floor('.totop', '.fixedmeau>li', '.louceng_box>.louceng', '.header_box');
    obj.init()
})

第三、实现楼层跳转、滚动监听、使用方便

相关插件-滚动

jquery模拟滚动条(未封装)

jquery模拟滚动条,支持自定义滚动条样式,兼容pad,web手机端未测试;支持同一网页多个滚动条;支持添加和删除(本人对封装不太了解,未封装)
  滚动
 29807  266

jquery页面滚动定位(支持上下滑动)

jquery页面滚动定位(支持上下滑动)
  滚动
 40594  313

jQueryScrollPage单页全屏滚动效果

漂亮的jQuery单页全屏滚动,带视差效果
  滚动
 25495  300

类似fullPage的全屏滚动插件

这是一款类似fullPage的全屏滚动插件,使用很简单
  滚动
 39309  329

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

    孙爱民? 0
    2020/4/18 15:58:00
    谢谢楼主,请问可以拿来弄一个项目吗,万分感谢
    回复
    blue 0
    2019/8/15 18:23:30
    $(that.floors).eq($(this).index()).offset().top,top报错未定义,是什么情况啊 回复
    ? 0
    2019/1/10 9:54:07
    哈哈哈个哈哈哈 回复
    自在如风 0
    2018/12/7 14:22:51
    非常好用,感谢分享 回复
    冰山一角 0
    2018/8/21 21:18:46
    这个不错。
        ? ??。 E o d0
        2018/8/30 10:54:26
        谢谢,互相学习
    回复
    @、、 0
    2018/6/9 13:08:54
    非常好用
        ? ??。 E o d0
        2018/6/13 23:28:54
        谢谢!相互学习!!!!
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复