这篇文章主要介绍如何使用jquery库实现电梯导航效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

电梯导航基本上就是使用元素距离页面头部的高度offsetTop和页面滚动的距离scrollTop来进行比较事项相应的效果。

1、页面滚动到相应的位置，实现电梯导航的显示与隐藏
2、页面滚动到相应的位置，电梯导航的按钮添加或者移出相应的类
3、点击电梯导航按钮，实现页面的滚动和为按钮添加或者移出相应的类
4、点击顶部按钮，返回顶部

html代码

<divclass="header">头部</div><divclass="banner">焦点图</div><divclass="content"><divclass="qinziw">亲子</div><divclass="lirenw">丽人</div><divclass="xuexiw">学习</div><divclass="lvyouw">旅游</div><divclass="zhusuw">住宿</div><divclass="meishiw">美食</div></div><divclass="footer">尾部</div><!--电梯导航--><divclass="floor"><ul><li>亲子</li><li>丽人</li><li>学习</li><li>旅游</li><li>住宿</li><li>美食</li></ul><span>顶部</span></div>

css代码

*{padding:0;margin:0;}body{font-size:30px;}.header{width:1100px;height:200px;background-color:pink;margin:0auto;}.banner{width:1100px;height:400px;background-color:skyblue;margin:0auto;}.footer{width:1100px;height:300px;background-color:darkolivegreen;margin:0auto;}.content{width:1100px;margin:0auto;}.content.qinzi{width:100%;height:324px;background-color:rosybrown;}.content.liren{width:100%;height:304px;background-color:slategrey;}.content.xuexi{width:100%;height:300px;background-color:khaki;}.content.lvyou{width:100%;height:300px;background-color:greenyellow;}.content.zhusu{width:100%;height:300px;background-color:darkcyan;}.content.meishi{width:100%;height:300px;background-color:lightgreen;}.floor{width:50px;position:fixed;top:150px;left:50%;margin-left:-620px;font-size:16px;text-align:center;}.floorli{width:50px;height:30px;background-color:grey;margin-bottom:5px;line-height:30px;list-style:none;cursor:pointer;}span{display:block;width:50px;height:30px;background-color:grey;margin-bottom:5px;line-height:30px;list-style:none;cursor:pointer;}.floor.current{background-color:hotpink;}

JavaScript代码

varflag=true;//使用节流阀//页面刚开始隐藏，当页面滚动到content的时候，电梯导航显示$(function(){//页面刷新时调用一次//封装函数，切换显示与隐藏varcontentTop=$(".content").offset().top;toggleTool();functiontoggleTool(){if($(document).scrollTop()>=contentTop){$(".floor").fadeIn();}else{$(".floor").fadeOut();}}$(window).scroll(function(){toggleTool()//页面滚动到相应位置，电梯导航按钮添加current类if(flag){$('.content.w').each(function(i,ele){varcuHeight=ele.offsetHeight/2;if($(document).scrollTop()>=$(ele).offset().top-cuHeight){$('.floorli').eq(i).addClass('current').siblings().removeClass();}})}})//点击电梯导航按钮，页面跳转到相应位置，使用jquery里面的animate$('.floorli').click(function(){flag=false;$(this).addClass('current').siblings().removeClass();varindex=$(this).index();varcurrent=$('.content.w').eq(index).offset().top;$('html,body').stop().animate({scrollTop:current},function(){flag=true;})})$('.floorspan').click(function(){$(this).addClass('current');$('html,body').stop().animate({scrollTop:0})})})

以上是“如何使用jquery库实现电梯导航效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！