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

实现:①使用$(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. RESTful HTTP的实践(转)

    add by zhj: 文章有点老了,2009年的,到现在已经六年了,不过还是很有参考价值的. 另外,吐槽一下PUT method,竟然允许用户用实例号来创建,靠,这也行,实例号还是后台来定义比较方便 ...

  2. mysql 迁移数据

    一.导出导入所有数据库的数据 1.导出 mysqldump -u root -p123456 --all-databases > all.sql 2.导入 mysql -u root -p123 ...

  3. db-mysql-001- 语句备份表

    1.备份表 CREATE TABLE AAbak( SELECT * FROM AA ); 2.两个已存在表导数据 INSERT INTO AAbak(c1,c2) SELECT c1,c2 FROM ...

  4. 17.如何网页发起QQ聊天

    1.被发起的QQ需要再QQ推广开启QQ在线状态http://shang.qq.com/v3/widget.html 2.html代码 <html> <head></hea ...

  5. Spark2.0机器学习系列之4:Logistic回归及Binary分类(二分问题)结果评估

    参数设置 α: 梯度上升算法迭代时候权重更新公式中包含 α :  http://blog.csdn.net/lu597203933/article/details/38468303 为了更好理解 α和 ...

  6. Cloudflare发布全球最快的DNS

    宣布1.1.1.1:速度最快,隐私优先的消费者DNS服务   Cloudflare的使命是帮助建立更好的互联网.今天我们很高兴能够在推出1.1.1.1--互联网最快,首先保护隐私的消费者DNS服务的同 ...

  7. 测试:safenet提供的CheckKey函数 内存泄漏。具体来说是句柄.

    unsigned char vendor_code[] = "7XSQT4jxlSkDJhwqpxxfLwbuxgrYw93OMy+K5sc5pyfTa7HQo1ikLyg7FDuEpgUK ...

  8. python3 用requests 保存网页以及BeautifulSoup保存图片,并且在本地可以正常显示文章的内容和图片

    用requests 模块做了个简单的爬虫小程序,将博客的一篇文章以及图片保存到本地,文章格式存为'.html'.当文章保存到本地后,图片的连接可能是目标站点的绝对或者相对路径,所以要是想在本地也显示图 ...

  9. Activity 间 bundle 传递参数

    activity_main.xml <TableLayout xmlns:android="http://schemas.android.com/apk/res/android&quo ...

  10. Linux系统——进程和计划任务管理

    进程和计划任务管理 一.进程和程序的关系 进程:在CPU及内存中运行的程序代码:动态执行的代码:每个进程可以创建一个或多个进程 程序:保存在硬盘.光盘等介质中的可执行代码和数据:静态保存的代码 二.基 ...