HTML - Click cierra menú desplegable

$("#menu").hide();

header label {

    float: right;

    font-size: 28px;

    margin: 6px 0px;

    cursor: pointer;

}

.menu {

    position: absolute;

    top: 50px;

    left: 0;

    width: 100%;

    height: 100vh;

    background: rgba(51,51,51,0.9);

    transition: all 0.2s;

    transform: translateX(-100%);

}

.menu a {

    display: block;

    color: seashell;

    height: 50px;

    text-decoration: none;

    padding: 15px;

    border-bottom: 1px solid rgba(255,255,255, 0.3);

}

.menu a:hover {

    background: rgba(255,255,255, 0.3);

}

#menu-bar:checked ~ .menu {

    transform: translateX(0%);

    transition: all 0.5s;

<header>

     <div class="contenedor">

         <a href="#banner"><h1 class="icon-tree">Jellas</h1></a>

         <input type="checkbox" id="menu-bar">

         <label class="icon-menu" for="menu-bar"></label>

    <nav class="menu">

      <a href="#banner">Inicio</a>

      <a href="#info">Stock</a>

      <a href="#social">Contacto</a>

    </nav>

    </div>

 </header>

<a href="#banner">Inicio</a>

<div id="banner">

tu contenido aqui

</div>

$(document).ready(function(){

$("#menu").hide();

});

<a href="#banner" onclick="hideMenu">Inicio</a>

<script>

const hideMenu = () => document.querySelector(".menu").display=none;

</script>

moverse dentro de la misma página, pero no sé cómo hacer para que al clicar una de esas funciones te lleve al lugar ...