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

实现:①使用$(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. windows脚本-CMD和Batch

    一.DOS,CMD和batch DOS是磁盘操作系统(英文:Disk Operating System)的缩写,是个人计算机上的一类操作系统.从1981年直到1995年的15年间,DOS在IBM PC ...

  2. Spark2.0 特征提取、转换、选择之一:数据规范化,String-Index、离散-连续特征相互转换

    数据规范化(标准化) 在数据预处理时,这两个术语可以互换使用.(不考虑标准化在统计学中有特定的含义). 下面所有的规范化操作都是针对一个特征向量(dataFrame中的一个colum)来操作的. 首先 ...

  3. 记CM+kerberos环境停电后无法启动报错An error: (java.security.PrivilegedActionException: javax.security.sasl.SaslException: GSS initiate failed [Caused by GSSException: No valid credentials provided (Mechanism leve

    公司突然停电,然后cm环境无法重启,报错 An error: (java.security.PrivilegedActionException: javax.security.sasl.SaslExc ...

  4. PAT 1037 Magic Coupon[dp]

    1037 Magic Coupon(25 分) The magic shop in Mars is offering some magic coupons. Each coupon has an in ...

  5. PAT 1033 To Fill or Not to Fill[dp]

    1033 To Fill or Not to Fill(25 分) With highways available, driving a car from Hangzhou to any other ...

  6. Linux系统——引导过程与服务控制

    一.Linux开机启动原理(十步) (1)开机自检BIOS 开机检测,主板检测 (2)MBR引导 硬盘512字节 (3)GRUB菜单 操作系统菜单 (4)加载内核(kernel) 启动操作系统核心,根 ...

  7. 用random模块实现验证码

    #! /usr/bin/env python3 import random checkcode = "" ## 全部为数字的验证码 # for i in range(4): # c ...

  8. GIT使用—分支与合并

    一.分支名 分支名不能以斜线结尾 分支名不能以减号开头 以斜杠分割的组件不能以点开头(feature/.new) 分支名的任何地方都不能包含连个连续的点 分支名不能包含空格或空白符 分支名不能包含波浪 ...

  9. 照着官网来安装openstack pike之keystone安装

    openstack基础环境安装完成后,现在开启安装keystone服务(在控制节点上执行下面所有操作) 1.为keystone创建数据库 mysql -u root -p MariaDB [(none ...

  10. linux input输入子系统分析《四》:input子系统整体流程全面分析

    1      input输入子系统整体流程 本节分析input子系统在内核中的实现,包括输入子系统(Input Core),事件处理层(Event Handler)和设备驱动层.由于上节代码讲解了设备 ...