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

所属分类:UI-滚动

 30619  410  查看评论 (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()
})

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

相关插件-滚动

双向垂直上下滚动

垂直滚动插件,可切换向上或向下方向滚动。
  滚动
 48255  375

jQuery瀑布流插件

jQuery瀑布流,结合animate.css、wow.js滚动展示效果,可扩展性强。
  滚动
 31970  313

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

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

jQueryScrollPage单页全屏滚动效果

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

讨论这个项目(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
        谢谢!相互学习!!!!
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复