這篇文章主要為大家詳細介紹了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>
<p id="header"></p>
<p class="floor" id="f1">
<p>第一层</p>
</p>
<p class="floor" id="f2">
<p>第二层</p>
</p>
<p class="floor" id="f3">
<p>第三层</p>
</p>
<p 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>
</p>
<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如何實現樓層滾動效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
