这篇文章主要介绍如何使用jquery库实现电梯导航效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
基本思路
电梯导航基本上就是使用元素距离页面头部的高度offsetTop和页面滚动的距离scrollTop来进行比较事项相应的效果。
页面滚动到相应的位置，实现电梯导航的显示与隐藏
2、页面滚动到相应的位置，电梯导航的按钮添加或者移出相应的类
3、点击电梯导航按钮，实现页面的滚动和为按钮添加或者移出相应的类
4、点击顶部按钮，返回顶部
代码实现
html代码
<div class="header">头部</div><div class="banner">焦点图</div> <div class="content"> <div class="qinzi w">亲子</div> <div class="liren w">丽人</div> <div class="xuexi w">学习</div> <div class="lvyou w">旅游</div> <div class="zhusu w">住宿</div> <div class="meishi w">美食</div> </div> <div class="footer">尾部</div> <!-- 电梯导航 --> <div class="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: 0 auto; } .banner { width: 1100px; height: 400px; background-color: skyblue; margin: 0 auto; } .footer { width: 1100px; height: 300px; background-color: darkolivegreen; margin: 0 auto; } .content { width: 1100px; margin: 0 auto; } .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; } .floor li { 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代码
var flag = true; //使用节流阀 //页面刚开始隐藏，当页面滚动到content的时候，电梯导航显示 $(function () { //页面刷新时调用一次 //封装函数，切换显示与隐藏 var contentTop = $(".content").offset().top; toggleTool(); function toggleTool() { if ($(document).scrollTop() >= contentTop) { $(".floor").fadeIn(); } else { $(".floor").fadeOut(); } } $(window).scroll(function () { toggleTool() //页面滚动到相应位置，电梯导航按钮添加current类 if (flag) { $('.content .w').each(function (i, ele) { var cuHeight = ele.offsetHeight / 2; if ($(document).scrollTop() >= $(ele).offset().top - cuHeight) { $('.floor li').eq(i).addClass('current').siblings().removeClass(); } }) } }) //点击电梯导航按钮，页面跳转到相应位置，使用jquery里面的animate $('.floor li ').click(function () { flag = false; $(this).addClass('current').siblings().removeClass(); var index = $(this).index(); var current = $('.content .w').eq(index).offset().top; $('html,body').stop().animate({ scrollTop: current }, function () { flag = true; }) }) $('.floor span').click(function () { $(this).addClass('current'); $('html,body').stop().animate({ scrollTop: 0 }) })})以上是“如何使用jquery库实现电梯导航效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网行业资讯频道！
