这篇文章主要介绍jquery如何实现楼层滚动效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
本文实例为大家分享了jquery实现楼层滚动效果展示的具体代码，供大家参考，具体内容如下
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/base.css" rel="external nofollow" > <style> #header,#f1,#f2,#f3{ width: 80%; height: 500px; background: yellow; margin-left: 10%; margin-top: 50px; } #f1{ background: green; } #f2{ background: red; } #f3{ background: blue; } #lift{ position: fixed; top: 280px; display: none; } .lift_btn{ display: inline-block; width: 50px; height: 50px; border: 1px solid #000; } .hover{ background: red; } </style> </head> <body> <div id="header"></div> <div class="floor" id="f1"> <p>第一层</p> </div> <div class="floor" id="f2"> <p>第二层</p> </div> <div class="floor" id="f3"> <p>第三层</p> </div> <div id="lift"> <ul> <li class="lift_item"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn"> <span>1</span> </a> </li> <li class="lift_item"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn"> <span>2</span> </a> </li> <li class="lift_item"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn"> <span>3</span> </a> </li> </ul> </div> <script src="js/jquery.min.js"></script> <script src="js/floor.js"></script> </body> </html>js:
(()=>{ var $lift=$("#lift"); $(window).scroll(()=>{ var scrollTop=$('html,body').scrollTop(); var $f1=$("#f1"); var offsetTop=$f1.offset().top; if(offsetTop<scrollTop+innerHeight/2) $lift.fadeIn(500); else $lift.fadeOut(500); var $floors=$(".floor"); $floors.each((i,elem)=>{ var $f=$(elem); if($f.offset().top<scrollTop+innerHeight/2) $lift.find(".lift_item:eq("+i+")").addClass("hover").siblings().removeClass("hover"); }); }); $lift.children("ul").on("click","li",function(){ var $li=$(this); var i=$li.index(); var $fi=$(".floor:eq("+i+")"); var offsetTop=$fi.offset().top; $("html").animate({ scrollTop:offsetTop-60 },500) }) })();jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。
以上是“jquery如何实现楼层滚动效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
