这篇“JQuery怎么实现电梯导航特效”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JQuery怎么实现电梯导航特效”文章吧。

效果如下：

以下是代码实现：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"/><title>基于JQuery实现电梯导航特效</title><styletype="text/css">*{margin:0;padding:0;font-family:'microsoftyahei';}#loutinav{width:35px;position:fixed;top:100px;left:50px;border:1pxsolid#ddd;display:none;}#loutinavulli{width:35px;height:32px;border-bottom:1pxdotted#DDDDDD;list-style:none;font-size:12px;text-align:center;position:relative;cursor:pointer;padding:10px0;background:#918888;color:#fff;}#loutinavullispan{width:35px;height:32px;padding:10px0;position:absolute;top:0;left:0;}#loutinavulli.last{background:#5e4a4a;color:#fff;border-bottom:1pxsolid#ddd;}#loutinavulli.activespan{background:#c00;color:#fff;display:block;}#loutinavulli:hoverspan{background:#c00;color:#fff;display:block;}#header{width:1000px;height:1000px;background:#cc6633;margin:0auto;font-size:50px;line-height:1000px;text-align:center;color:#000;}#main{width:1000px;background:#66ff66;margin:0auto;}#main.louti{height:600px;width:1000px;font-size:50px;color:#fff;font-weight:bold;text-align:center;line-height:600px;}#footer{width:1000px;height:400px;background:red;margin:0auto;font-size:50px;line-height:400px;text-align:center;color:#000;}</style></head><body><divid="loutinav"><ul><liclass="active"><span>享品质</span></li><li><span>服饰美妆</span></li><li><span>电脑数码</span></li><li><span>3C运动</span></li><li><span>爱吃</span></li><li><span>母婴居家</span></li><li><span>图书汽车</span></li><li><span>虚拟</span></li><li><span>还没逛够</span></li><liclass="last">顶部</li></ul></div><divid="header">向下滚动鼠标查看效果</div><divid="main"><divclass="louti">享品质</div><divclass="louti">服饰美妆</div><divclass="louti">电脑数码</div><divclass="louti">3C运动</div><divclass="louti">爱吃</div><divclass="louti">母婴居家</div><divclass="louti">图书汽车</div><divclass="louti">虚拟</div><divclass="louti">还没逛够</div></div><divid="footer">网站底部</div><scriptsrc="js/jquery-1.8.3.min.js"></script><script>$(function(){$(window).on('scroll',function(){var$scroll=$(this).scrollTop();//显示楼层标签if($scroll>=800){$('#loutinav').show();}else{$('#loutinav').hide();}//拖动滚轮，点亮对应的楼层标签$('.louti').each(function(){var$loutitop=$('.louti').eq($(this).index()).offset().top+400;//楼层的top大于滚动条的距离if($loutitop>$scroll){$('#loutinavli').removeClass('active');$('#loutinavli').eq($(this).index()).addClass('active');//中断循环returnfalse;}});});//获取每个楼梯的offset().top,点击楼层让对应的内容模块移动到对应的位置var$loutili=$('#loutinavli').not('.last');$loutili.on('click',function(){$(this).addClass('active').siblings('li').removeClass('active');var$loutitop=$('.louti').eq($(this).index()).offset().top;//获取每个楼梯的offsetTop值//$('html,body')兼容问题body属于chrome$('html,body').animate({scrollTop:$loutitop})});//回到顶部$('.last').on('click',function(){//$('html,body')兼容问题body属于chrome$('html,body').animate({scrollTop:0})});})</script></body></html>

以上就是关于“JQuery怎么实现电梯导航特效”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。