jquery - スクロール機能付きのモバイル ドロップダウン メニューを作成しますか?

Question

だから私はウェブサイト、特にモバイル版に取り組んでいます。ユーザーが「ナビコン」をクリックすると下にスライドする「ドロップダウン」メニューを作成しました。また、ユーザーが「ナビコン」をクリックすると、ウェブサイトが実際の「ナビコン」画像までスクロールダウンし、モバイル ナビゲーションがよりスムーズかつ高速になります。メニューが上ではなく下にスライドするときにのみスクロール機能を機能させるだけでなく、方法を理解することもできません（どこにも答えを見つけることもできません）。しかし、メニュー項目をクリックするたびにメニュー項目を閉じることも必要です。何か助けはありますか？

これが私のコードです：

<-----------------------------HTML----------------------- -->

<div class="naviconbutton displaydesktop displaytablet" id="navbutton">

<img src="sitefiles/img/navicon-black.png" alt="navicon" class="navicon">

</div>

<nav class="displaydesktop displaytablet">

<ul id="menu-m">

<li class="click click1"> Menu 1 </li>

<li class="click click2"> Menu 2 </li>

<li class="click click3"> Menu 3 </li>

<li class="click click4"> Menu 4 </li>

</ul>

</nav>

<-----------------------------CSS----------------------------------- -->

.naviconbutton {
background:#ddd;
width:100%;
opacity:0.3;
float:left;
margin:20px 0 0 0;
padding:20px 0 20px 0;
}

.naviconbutton .navicon {
display:block;
margin:0 auto;
width:10%;
padding:0;
}

#menu-m {
overflow:hidden;
float:left;
background:#eee;
width:100%;
list-style:none;
padding:0;
margin:0;
height:0px;

-webkit-box-shadow:inset 0 0 15px #999999;
-moz-box-shadow:inset 0 0 15px #999999;
-ms-box-shadow:inset 0 0 15px #999999;
box-shadow:inset 0 0 15px #999999;

-webkit-transition:height ease 0.3s;
-moz-transition:height ease 0.3s;
-ms-transition:height ease 0.3s;
transition:height ease 0.3s;
}

#menu-m.slide {
height:313px;
}

#menu-m li {
display:block;
width:100%;
float:left;
padding:30px;
text-align:center;
font-family:"Lato";
font-weight:300;
font-size:15px;

-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}

<------------------------------JQUERY----------------------- -->

$(".naviconbutton").click(function(){
$("#menu-m").toggleClass("slide");
$("html, body").animate({
scrollTop: $("#navbutton").offset().top
}, 400);
});

$(".click").click(function(){
$("#menu-m").removeClass("slide");
});

$(".click1").click(function(){
$("html, body").animate({
scrollTop:("600px")
}, 400);
});