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

实现:①使用$(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. Linux时间管理涉及数据结构和传统低分辨率时钟的实现

    上篇文章大致描述了Linux时间管理的基本情况,看了一些大牛们的博客感觉自己写的内容很匮乏,但是没办法,只能通过这种方式提升自己……闲话不说,本节介绍下时间管理下重要的数据结构 设备相关数据结构 // ...

  2. 转:docker的核心技术深度剖析

    一.docker是什么 Docker的英文本意是码头工人,也就是搬运工,这种搬运工搬运的是集装箱(Container),集装箱里面装的可不是商品货物,而是任意类型的App,Docker把App(叫Pa ...

  3. MySQL存储引擎与事务

    1.作用 和磁盘的数据打交道 2.简介 MySQL  基于存储引擎管理 表空间数据数据文件 3.种类 Innodb存储引擎ibd:存储表的数据行和索引frm:表基本结构信息Myisam存储引擎frmm ...

  4. python基础之小数据池、代码块、编码

    一.代码块.if True: print(333) print(666) while 1: a = 1 b = 2 print(a+b) for i in '12324354': print(i) 虽 ...

  5. 关于Unix时间戳转北京时间的问题

    工具在这里:http://tool.chinaz.com/Tools/unixtime.aspx?qq-pf-to=pcqq.group 今天踩了坑,无论参数是多少,年份总是1970.才发现原来参数必 ...

  6. 007-Hadoop Hive sql语法详解2-修改表结构

    一.表 更改表名:ALTER TABLE table_name RENAME TO new_table_name 增加表的元数据信息:ALTER TABLE table_name SET TBLPRO ...

  7. C# 使用 SqlBulkCopy 类批量复制数据到数据库

    最近公司需要优化导入的问题,由于之前使用的方式是生成 Insert 语句插入数据库,数据量小的时候还行,但是随着发展数据量渐渐大了,之前的方法性能就跟不上了,于是发现了 SqlBulkCopy 这个类 ...

  8. 4. Median of Two Sorted Arrays(2个有序数组的中位数)

    There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the two ...

  9. https://www.cnblogs.com/skywang12345/category/455711.html

    https://www.cnblogs.com/skywang12345/category/455711.html

  10. 【Linux学习】2.Linux常见命令行

    记录学习Linux 系统的相关知识点,欢迎大家拍砖交流,一起成长:QQ:2712192471 作者背景:前端开发工程师 | Python | web安全爱好者   Linux命令行: 系统关机重启 s ...