实现原理：利用css实现电梯导航很简单，基本原理就是通过a标签绑定跳转目标的id来实现的
html代码：
<div class="body">
<div class="top" id="top"></div>
<div class="con1" id="con1"></div>
<div class="con2" id="con2"></div>
<div class="footer" id="footer"></div>
</div>
<div class="navs">
<div class="navs_top">
<a href="#top">top</a>
</div>
<div class="navs_nav">
<a href="#con1">nav</a>
</div>
<div class="navs_con">
<a href="#con2">con</a>
</div>
<div class="navs_footer">
<a href="#footer">footer</a>
</div>
</div>css代码：
.top {
width: 80%;
background-color: aqua;
height: 300px;
margin: auto;
}
.con1 {
position: relative;
width: 80%;
background-color: brown;
height: 300px;
margin: auto;
}
.con2 {
width: 80%;
background-color: wheat;
height: 300px;
margin: auto;
}
.footer {
width: 80%;
background-color: rebeccapurple;
height: 300px;
margin: auto;
}
.navs {
position: fixed;
right: 4.375rem;
top: 50%;
}
html{
/* 页面滚动效果 */
scroll-behavior: smooth;
}效果演示：
文章来源地址https://www.toymoban.com/news/detail-661606.html
文章来源：https://www.toymoban.com/news/detail-661606.html
到了这里，关于css 实现电梯导航的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/797403-1.png)
![[HTML]Web前端开发技术11（HTML5、CSS3、JavaScript ）页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列复杂模式水平导航菜单——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/787720-1.png)
