实现原理：利用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;
      }

效果演示：