写在最前面
楼梯导航在很多地方都在使用，最常见的就是购物网站，其实这个功能实现起来很简单。
主要掌握获取元素的下标，获取元素距离页面顶端的高度、使用动画将需要展示的元素展示出来。
食用教程
直接上代码：
<html>
<head>
<title>jQuery楼梯导航</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
<style>
.item{
width: 1000px;
height: 500px;
border: 1px solid red;
background-color: rgb(229 229 229);
margin: auto;
font-size: 50px;
text-align: center;
}
.nav{
position: fixed;
right: 100px;
top: 200px;
}
li{
width: 50px;
height: 50px;
list-style-type: none;
text-align: center;
background-color: rgb(229 229 229);
border: 1px solid red;
}
</style>
</head>
<body>
<div class="page">
<div class="item">10F</div>
<div class="item">9F</div>
<div class="item">8F</div>
<div class="item">7F</div>
<div class="item">6F</div>
<div class="item">5F</div>
<div class="item">4F</div>
<div class="item">3F</div>
<div class="item">2F</div>
<div class="item">1F</div>
</div>
<div class="nav">
<ul>
<li>10F</li>
<li>9F</li>
<li>8F</li>
<li>7F</li>
<li>6F</li>
<li>5F</li>
<li>4F</li>
<li>3F</li>
<li>2F</li>
<li>1F</li>
</ul>
</div>
</body>
<script>
// 当右侧的导航栏中的项目被单击时执行该函数
$('li').click(function(){
var index = $(this).index(); //当右侧的导航栏被单击时获取当前元素的下标
var height = $('.item').eq(index).offset().top; //获取相对应的元素的位置
$('html,body').animate({"scrollTop":height - 100}) //使用动画将需要展示的元素展示出来
})
</script>
</html>运行结果：
![图片[1]-jQuery楼梯导航-挨踢星球](https://edevplat.com/wp-content/uploads/2022/07/image.png)
写在最后
只要还有明天，今天就永远是起跑线。（As long as there s tomorrow, today s always the startng lne.）
© 版权声明
THE END
暂无评论内容