这篇“JQuery怎么实现电梯导航特效”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“JQuery怎么实现电梯导航特效”文章吧。
效果如下：
以下是代码实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>基于JQuery实现电梯导航特效</title> <style type="text/css"> * { margin: 0; padding: 0; font-family: 'microsoft yahei'; } #loutinav { width: 35px; position: fixed; top: 100px; left: 50px; border: 1px solid #ddd; display: none; } #loutinav ul li { width: 35px; height: 32px; border-bottom: 1px dotted #DDDDDD; list-style: none; font-size: 12px; text-align: center; position: relative; cursor: pointer; padding: 10px 0; background: #918888; color: #fff; } #loutinav ul li span { width: 35px; height: 32px; padding: 10px 0; position: absolute; top: 0; left: 0; } #loutinav ul li.last { background: #5e4a4a; color: #fff; border-bottom: 1px solid #ddd; } #loutinav ul li.active span { background: #c00; color: #fff; display: block; } #loutinav ul li:hover span { background: #c00; color: #fff; display: block; } #header { width: 1000px; height: 1000px; background: #cc6633; margin: 0 auto; font-size: 50px; line-height: 1000px; text-align: center; color: #000; } #main { width: 1000px; background: #66ff66; margin: 0 auto; } #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: 0 auto; font-size: 50px; line-height: 400px; text-align: center; color: #000; } </style> </head> <body> <div id="loutinav"> <ul> <li class="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> <li class="last">顶部</li> </ul> </div> <div id="header"> 向下滚动鼠标查看效果 </div> <div id="main"> <div class="louti" > 享品质 </div> <div class="louti" > 服饰美妆 </div> <div class="louti" > 电脑数码 </div> <div class="louti" > 3C运动 </div> <div class="louti" > 爱吃 </div> <div class="louti" > 母婴居家 </div> <div class="louti" > 图书汽车 </div> <div class="louti" > 虚拟 </div> <div class="louti" > 还没逛够 </div> </div> <div id="footer"> 网站底部 </div> <script src="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) { $('#loutinav li').removeClass('active'); $('#loutinav li').eq($(this).index()).addClass('active'); // 中断循环 return false; } }); }); // 获取每个楼梯的offset().top,点击楼层让对应的内容模块移动到对应的位置 var $loutili = $('#loutinav li').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怎么实现电梯导航特效”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
