메뉴 클릭시 이동 하는 active, scroll

html파일

<nav class="nav">
        <div class="nav-icon"><div></div></div>
        <ul class="navbar">
          <li class="menus"><span id="menu1">메뉴1</span></li>
          <li class="menus"><span id="menu2">메뉴2</span></li>
          <li class="menus"><span id="menu3">메뉴3</span></li>
          <li class="menus"><span id="menu4">메뉴4</span></li>
          <li class="menus"><span id="menu5">메뉴5</span></li>

        </ul>
      </nav>력하세요

css파일

.header{width:100%;padding-left: 15px; padding-right: 15px; border-bottom: 1px solid #d9d9d9; position: fixed;top:0; left:0; z-index: 999; background-color: #fff;}
.header .header-inner{position: relative; width:100%; display: flex; align-items: center;    justify-content: space-between;}
.header .nav .nav-icon{display: inline-block; width:24px; cursor: pointer; position: absolute; top:50%; right: 10px; z-index: 100;}
.header .nav .nav-icon:before{display:block; content:""; margin-top:0; background-color: #191919; height: 2px; margin:5px 0;-moz-transition: all .2s ease-in-out;-webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
.header .nav .nav-icon > div{display:block; content:""; margin-top:0; background-color: #191919; height: 2px; margin:5px 0;-moz-transition: all .2s ease-in-out;-webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
.header .nav .nav-icon:after{display:block; content:""; margin-top:0; background-color: #191919; height: 2px; margin:5px 0;-moz-transition: all .2s ease-in-out;-webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}

.header .nav .navbar li{cursor: pointer;}
.header .nav .navbar li > span:hover{color:#4cc8ca; position: relative;}



@media (min-width: 1024px) {

    .header { width:100%; position: fixed;  }
    .header .header-inner{max-width:1400px; margin: 0 auto; height: 97px; }
    .header .logo{width:147px;}
    .header .nav{width: calc(100% - 134px);}
    .header .nav .nav-icon{display: none;}
    .header .nav .navbar{display: flex; justify-content: right; align-items: center;}
    .header .nav .navbar li{font-size:19px;  padding-right: 68px;}
   
    .header .nav .navbar li > span:hover:before{content:""; display: block; width:6px; height: 6px; position: absolute; top:-10px; left:50%; -webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%); border-radius: 50%; background: #4cc8ca; }
    
    .header .nav .navbar li > span.active{color:#4cc8ca;position: relative;}
    .header .nav .navbar li > span.active:before{content:""; display: block; width:6px; height: 6px; position: absolute; top:-10px; left:50%; -webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%); border-radius: 50%; background: #4cc8ca;}



}

js파일

const menus = document.querySelectorAll('li');
const contents = document.querySelectorAll('.content');

window.onload = function(){
  for(let i =0; i<menus.length; i++){
    menus[i].setAttribute("onclick","elemRemove("+i+")")
  }
}

function elemRemove(menuNum){
  for(let i=0 ; i<menus.length; i++){
    if(i===menuNum){
      window.scroll({top:contents[i].offsetTop, behavior:'smooth'});
      document.getElementById("menu"+(i+1)).classList.add("active");
    }else{
      document.getElementById("menu"+(i+1)).classList.remove("active");
    }
  }
}