css 实现电梯导航

实现原理：利用css实现电梯导航很简单，基本原理就是通过a标签绑定跳转目标的id来实现的

  html代码：

 

      

      

      

      

    
    

      

        top
      
      

        nav
      
      

        con
      
      

        footer
      
    

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;
      }

效果演示：