楼层:①页面滑动到哪块儿“楼层”就显示到哪个;②点击某“楼层”页面滚动到对应的位置;③点击“返回”回到页面顶部

实现:①使用$(window).scroll(function(){ });  //监视页面滚动的高度,使用$(document).scrollTop();获取;②滚到对应的位置:$("html,body").stop().animate({"scrollTop":$(".jd").eq($this).index()).offset().top}); ③点击“返回”$("html,body").stop().animate({"scrollTop":0},300);

注:offset().top、offset().left指的是坐标值,是某元素的顶部或左侧到页面(文档/document)的高度或左边距

jQuery实际案例⑤——仿京东侧边栏(楼层)的更多相关文章

  1. jquery实现仿京东侧边栏

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. js 鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层异步加载模式

    js用处:在做商城时,首页图片太多,严重影响首页打开速度,所以我们需要用到异步加载楼层.js名称:鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层模式js解释:1.用于商城的楼层内容异步加载,滚动条 ...

  3. jQuery仿京东无限级菜单HoverTree

    官方网址:http://keleyi.com/jq/hovertree/ 效果图: 看了上面效果图,你或许已经明白为什么是仿京东菜单.如果还不明白,请访问http://list.jd.com/list ...

  4. jQuery仿京东首页广告图片切换图片轮播

    1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. Jquery特效之=》仿京东多条件筛选特效

    仿京东多条件筛选特效 * { margin: 0; padding: 0; list-style-type: none } a, img { border: 0 } body { font: 12px ...

  6. ThinkPHP3.2开发仿京东商城项目实战视频教程

    ThinkPHP3.2仿京东商城视频教程实战课程,ThinkPHP3.2开发大型商城项目实战视频 第一天 1.项目说明 2.时间插件.XSS过滤.在线编辑器使用 3.商品的删除 4.商品的修改完成-一 ...

  7. 仿京东树形菜单插件hovertree

    hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/欢迎下载使用 查看绿色效果:http://ke ...

  8. div css仿京东订单流程图样式代码

    效果展示 http://hovertree.com/texiao/css/25/ 本效果适合PC,也适合移动端 手机扫描二维码查看效果: 效果图: 代码如下: <!DOCTYPE html> ...

  9. iOS仿京东分类菜单之UICollectionView内容

    在上<iOS仿京东分类菜单实例实现>已经实现了大部分主体的功能,本文是针对右边集合列表进行修改扩展,使它达到分组的效果,本文涉及到的主要是UICollectionView的知识内容,左边列 ...

随机推荐

  1. Oracle 实现拆分列数据的split()方法

    -- 创建需要划分的字符串 with T1 as( select 'one,two,three,four,five,six,seven,eight,nine,zero' as source_strin ...

  2. MySQL 一些让人容易忽视的知识点

    一下都是MySQL在实际开发中,经常容易让人忽视的点,希望对您有帮助,帮您越过这些坑. 一:MySQL AND优先级大于OR 今天上班时在写一个业务的时候又发现了一个MySQL的问题: 我们的业务是这 ...

  3. vim的快捷键

    vim的快捷键 (〇)3中模式之间的切换 默认在命令模式. i键,从命令模式,进入插入模式. 冒号(:)键,从命令模式,进入末行模式. Esc键,从插入模式.末行模式,进入命令模式. (一)命令模式下 ...

  4. PHP json_encode自动转码的问题

    用PHP的json_encode处理中文的时候, 中文会被编码成类似于"\u5f20\u4e09"的格式,例如: <?php $arr = array('张三','李四'); ...

  5. 脱离JVM? Hadoop生态圈的挣扎与演化

    本文由知乎<大数据应用与实践>专栏 李呈祥授权发布,版权所有归作者,转载请联系作者! 新世纪以来,互联网及个人终端的普及,传统行业的信息化及物联网的发展等产业变化产生了大量的数据,远远超出 ...

  6. Oracle 修改trace 文件路径

    修改trace 文件路径命令 适用于oracle 11G以后的版本 在集群环境中的2个节点都生效SQL> ALTER SYSTEM SET diagnostic_dest='/tmp' SCOP ...

  7. Mac电脑下-nodejs安装卸载升级

    一.Mac 安装nodejs: 1:brew install node 2:官网上下载指定版本(.pkg)双击安装 二.Mac 卸载nodejs: 1: brew的安装方式的卸载:   brew un ...

  8. [golang note] 函数定义

    普通函数定义 √ golang函数基本组成:关键字func.函数名.参数列表.返回值.函数体和返回语句. • 语法如下 func 函数名(参数列表) (返回值列表) { // 函数体 } • 示例如下 ...

  9. quick cocos2d-x 下载地址

    https://github.com/chukong/quick-cocos2d-x/tree/master http://www.cocos2dx.net/post/280 配置说明 http:// ...

  10. 在Windows下使用Dev-C++开发基于pthread.h的多线程程序【转】

    在Windows下使用Dev-C++开发基于pthread.h的多线程程序[转]     在Windows下使用Dev-C++开发基于pthread.h的多线程程序   文章分类:C++编程     ...