Проблема с позицией прокрутки с помощью активной навигации

Question

У меня проблема с Resposive Navigation, над которой я работал. Проблема в том, что когда я открываю, а затем закрываю меню, я возвращаюсь в начало страницы. То же самое, что и перед открытием меню. Как это сделать?

HTML

 <header class="header">
      <div class="logo">
        <h2>LOGO</h2>
      </div>
        <nav>
            <div id="mainbox" onclick="openFunction()"><i class="fas fa-bars"></i></div>
            <div id="menu" class="sidemenu">
             <a href="#">Home</a>
             <a href="#">About</a>
             <a href="#">Contact</a>
             <a href="#">Login</a>
             <a href="#" class="closebtn" onclick="closeFunction()">&times;</a>
            </div>
        </nav>
    </header>

CSS

#mainbox{
 font-size: 24px;
 cursor: pointer;
 transition: all .6s;
 display:none;

}
.sidemenu{
  background-color: #222;
  color:#999;
  float:right;

}
.sidemenu a{
 padding:20px 20px;
 text-decoration: none;
 font-size: 20px;
 color: #999;
 display: inline-block;
}
.sidemenu a:hover{
  color: white;
}
.sidemenu .closebtn{
 position: absolute;
 top: -15px;
 right: 15px;
 font-size: 36px;
 margin-left: 0px;
 display:none;
}
.fas{
  color:#999;
  margin-top:20px;
  margin-right:32px;
}
.fas:hover{
  color:white;
}

@media screen and (max-width: 600px){
  #mainbox{
    display:block;
    float:right;
  }
  .header{
    position: fixed;
    top: 0;
    width: 100%;
  }
  .sidemenu .closebtn{display:block;}
  .sidemenu{
    display:block;
    position: fixed;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    background-color: #222;
    z-index: 1;
    padding-top: 100px;
    overflow-x: hidden;
    transition: all .5s;
    text-align: center;
   }
   .sidemenu a{
     display:block;

      text-decoration: none;
      font-size: 20px;
      color: #999;
   }

}

Javascript

function openFunction(){
  document.getElementById("menu").style.width="100%";
  document.getElementById("mainbox").style.marginLeft="300px";

 }
function closeFunction(){
 document.getElementById("menu").style.width="0px";
 document.getElementById("mainbox").style.marginLeft="0px";

}

Answer 1

Это из-за вашего href = "#", просто добавьте e.preventDefault(), чтобы закрыть функцию.

html

<a href="#" class="closebtn" onclick="closeFunction(e)">&times;</a>

js

function closeFunction(e){
 e = e || window.event;
 e.preventDefault()
 document.getElementById("menu").style.width="0px";
 document.getElementById("mainbox").style.marginLeft="0px";

}

Надеюсь, это сработает для вас