jQuery实际案例⑤——仿京东侧边栏(楼层)

楼层:①页面滑动到哪块儿“楼层”就显示到哪个;②点击某“楼层”页面滚动到对应的位置;③点击“返回”回到页面顶部
实现:①使用$(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实际案例⑤——仿京东侧边栏(楼层)的更多相关文章
- jquery实现仿京东侧边栏
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- js 鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层异步加载模式
js用处:在做商城时,首页图片太多,严重影响首页打开速度,所以我们需要用到异步加载楼层.js名称:鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层模式js解释:1.用于商城的楼层内容异步加载,滚动条 ...
- jQuery仿京东无限级菜单HoverTree
官方网址:http://keleyi.com/jq/hovertree/ 效果图: 看了上面效果图,你或许已经明白为什么是仿京东菜单.如果还不明白,请访问http://list.jd.com/list ...
- jQuery仿京东首页广告图片切换图片轮播
1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- Jquery特效之=》仿京东多条件筛选特效
仿京东多条件筛选特效 * { margin: 0; padding: 0; list-style-type: none } a, img { border: 0 } body { font: 12px ...
- ThinkPHP3.2开发仿京东商城项目实战视频教程
ThinkPHP3.2仿京东商城视频教程实战课程,ThinkPHP3.2开发大型商城项目实战视频 第一天 1.项目说明 2.时间插件.XSS过滤.在线编辑器使用 3.商品的删除 4.商品的修改完成-一 ...
- 仿京东树形菜单插件hovertree
hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/欢迎下载使用 查看绿色效果:http://ke ...
- div css仿京东订单流程图样式代码
效果展示 http://hovertree.com/texiao/css/25/ 本效果适合PC,也适合移动端 手机扫描二维码查看效果: 效果图: 代码如下: <!DOCTYPE html> ...
- iOS仿京东分类菜单之UICollectionView内容
在上<iOS仿京东分类菜单实例实现>已经实现了大部分主体的功能,本文是针对右边集合列表进行修改扩展,使它达到分组的效果,本文涉及到的主要是UICollectionView的知识内容,左边列 ...
随机推荐
- neutron ml2
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zhoumingbo532/article/details/27964675 在介绍ml2之前,先介绍 ...
- java 多线程 day12 读写锁
import java.util.Random;import java.util.concurrent.locks.ReadWriteLock;import java.util.concurrent. ...
- nginx映射文件服务器文件夹
nginx映射文件服务器文件夹 普通用户A安装的nginx,yum源搭建文件服务器,新建普通用户B,其主目录是文件服务器需要访问的目录 普通用户A启动nginx无法访问B用户的文件服务器目录,提示40 ...
- Centos Docker1.12 远程Rest api访问的配置方法
Docker默认是没有开启HTTP远程访问的,默认只支持通过unix socket通信操作docker daemon,需要使用HTTP restful接口需要修改配置. 1.修改配置文件,文件位置/l ...
- glib简单记录包括字符串,主循环,回调函数和xml解析
一.将最近用到的glib字符串功能整理了下直接用程序记录比较好看懂 #define MAX_LEN 100gchar * demo (char* msg, ...){ gchar * pcfgf ...
- node+express+http-proxy-middleware做代理
最近,不赶着做项目,于是想着怎样做公司的前后端分离,这个时候想到了nodejs,于是打算今天做一个代理的demo,其实代码很简单,但是一直卡在一个地方,现在问题解决了,贴上代码和截图. html &l ...
- undefined reference to _imp__xmlFree
Re: [xml] MSYS and MINGW: undefined reference to _imp__xmlFree From: Mike Peat <mpeat unicorninte ...
- Mac OS OpenVpN 连接设置(转)
下文介绍Mac OS连接使用OpenVPN方法教程,使用的软件是免费开源的Tunnelblick,当然也有其它连接软件,比如Viscosity,不过这个是付费的,还是前面的用的多. 1.下载安装Tun ...
- hdu6215 Brute Force Sorting
地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=6215 题目: Brute Force Sorting Time Limit: 1000/100 ...
- ACM-ICPC 2018 焦作赛区网络预赛 E. Jiu Yuan Wants to Eat (树链剖分-线性变换线段树)
树链剖分若不会的话可自行学习一下. 前两种操作是线性变换,模\(2^{64}\)可将线段树全部用unsigned long long 保存,另其自然溢出. 而取反操作比较不能直接处理,因为其模\(2^ ...