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

Posted carrie_zhao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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实际案例⑤——仿京东侧边栏(楼层)的主要内容,如果未能解决你的问题,请参考以下文章

仿淘宝固定侧边栏

js仿淘宝侧边栏(学习笔记)

js仿淘宝侧边栏滚动条

android自定义View之仿通讯录侧边栏滑动,实现A-Z字母检索

Web API (scroll系列)(仿淘宝侧边栏效果实现)(mouseenter与mouseover的区别)(动画的原理)(缓动动画)

如何使用 jquery 激活侧边栏菜单?