这篇文章主要介绍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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
