ハンバーガーメニューを開く度メニュートップ位置に戻したい

Question

前提・実現したいこと

高さを500pxほどの小さい画面で、よくあるハンバーガーメニューを開きメニューを一番下までスクロールしMNU8をクリックし、再度メニューを開くと前回メニュー内でスクロールした一番下のままの位置で表示されます。
メニューを開くたびにTOPが一番上まで来るような、メニュー内を一番上に戻すようにしたいです。

該当のソースコード

<header id="ly_header">
    <div class="ly_header_inner">
      <div class="el_headerNav_btn el_headerNav_btn__open">open</div>
      <div class="bl_panel">
        <div class="bl_panel_inner">
          <div class="el_headerNav_btn el_headerNav_btn__close">close</div>
            <nav>
              <ul class="bl_headerNav">
                <li class="bl_headerNav_item blurTrigger">
                  <a href="#top" class="bl_headerNav_link">TOP</a>
                </li>
                <li class="bl_headerNav_item blurTrigger">
                  <a href="#menu1" class="bl_headerNav_link">MENU1</a>
                </li>
                <li class="bl_headerNav_item blurTrigger">
                  <a href="#menu2" class="bl_headerNav_link">MENU2</a>
                </li>
                <li class="bl_headerNav_item blurTrigger">
                  <a href="#menu3" class="bl_headerNav_link">MENU3</a>
                </li>
                <li class="bl_headerNav_item blurTrigger">
                  <a href="#menu4" class="bl_headerNav_link">MENU4</a>
                </li>
                <li class="bl_headerNav_item blurTrigger">
                  <a href="#menu5" class="bl_headerNav_link">MENU5</a>
                </li>
                <li class="bl_headerNav_item blurTrigger">
                  <a href="#menu6" class="bl_headerNav_link">MENU6</a>
                </li>
                <li class="bl_headerNav_item blurTrigger">
                  <a href="#menu7" class="bl_headerNav_link">MENU7</a>
                </li>
                <li class="bl_headerNav_item blurTrigger">
                  <a href="#menu8" class="bl_headerNav_link">MENU8</a>
                </li>
              </ul>
            </nav>
          </div><!--.bl_panel_inner-->
        </div><!--.bl_panel-->
      </div><!--.ly_header_inner-->
  </header>

  <div class="content" id="top">TOP</div>
  <div class="content" id="menu1">MENU1</div>
  <div class="content" id="menu2">MENU2</div>
  <div class="content" id="menu3">MENU3</div>
  <div class="content" id="menu4">MENU4</div>
  <div class="content" id="menu5">MENU5</div>
  <div class="content" id="menu6">MENU6</div>
  <div class="content" id="menu7">MENU7</div>
  <div class="content" id="menu8">MENU8</div>

body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
}
.bl_panel {
    width: 100%;
    height: 100vh;
    background-color: rgba(266,162,172,0.8);
    position: fixed;
    top: 0;
    left: 0;
    transition: all .5s;
    opacity: 0;
    z-index: -1;
}
.bl_panel.panelactive {
    opacity: 1;
        z-index: 999;
}
.bl_panel.panelactive .bl_panel_inner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.bl_panel_inner nav {
    z-index: 999;
    width: 100%;
}
.bl_headerNav {
    padding: 20px;
}
header#ly_header {
    width: 100%;
    height: 100px;
    z-index: 999;
    position: fixed; /* 上下スクロールでヘッダーの表示・非表示するアニメーション用 */
    top: 0;
    left: 0;
    background: #333;
    transition: all .5s;
}
header#ly_header.is-hide {
    transform: translateY(-100%);
}
.el_headerNav_btn.el_headerNav_btn__open {
    width: 100px;
    height: 100px;
    background: #ccc;
}
.el_headerNav_btn.el_headerNav_btn__close {
    width: 100px;
    height: 100px;
    background: #0ff;
}
.content {
  height: 50vh;
}
.bl_headerNav_link {
    font-size: 16px;
    padding: 20px;
    display: block;
}

// 上下スクロールでヘッダーの表示・非表示するアニメーション用   
var pos = 0;
function FixedAnime() {
    var scroll = $(window).scrollTop();
    var Header = $('#ly_header');
    if ( scroll < pos || scroll < 200 ) {
        Header.removeClass('is-hide');
    } else {
        Header.addClass('is-hide');
    }
    pos = scroll;
}  
   
//　ハンバーガーメニュー
var scrollPosition;
  $('.el_headerNav_btn__open').click(function(){
      scrollPosition = $(window).scrollTop();
		$('body').addClass('fixed').css({'top': -scrollPosition});
    $('.bl_panel').addClass('panelactive'); 
  });
  
   $('.el_headerNav_btn__close, .bl_headerNav_link').click(function(){
       $('body').removeClass('fixed').css({'top': 0});
		window.scrollTo( 0 , scrollPosition );
       
    $('.bl_panel').removeClass('panelactive');
      $('.bl_panel').scrollTop(0); 
  }); 
     
// 関数まとめ
$(window).on('load', function() {
   FixedAnime();
});


$(window).on('scroll', function() {
  FixedAnime()  ;
});

試したこと

上記の通り$('.bl_panel').scrollTop(0);としました。
高さ５００pxぐらいのブラウザ設定で、ハンバーガーメニュー内を一番下までスクロールしてMNU8をクリックし、再度メニューを開くと前回スクロールしたメニュー一番下のままで表示され、メニュー内のTOPが上に来ません。
超初心者なので分かりづらかったら申し訳ございません。
よろしくお願いいたします。

Comments

[cerfweb]

提示されたコードだけでは状況が再現できませんので、最低限表示されるものを追記するか何かした方が回答がつきやすいと思いますよ。

[maronteratail]

コメントありがとうございました！
急遽数日間入院していまして、本日退院いたしましたらコメントがついていたので急いで返信いたします。
完全に私事でご迷惑をおかけして大変申し訳ございませんでした！
アドバイス通り加筆修正いたしました。

Answer 1

コードの修正を受け、再度回答させていただきます。
開いたメニュー側をトップに戻したいとのことなので、「openをクリックしたとき、メニューを入れた要素のスクロール位置を0にする」または「closeするとき、メニューを入れた要素のスクロール位置を0にする」処理を行うと良いかと思います。

現在のJavaScriptは「クローズしたとき、.bl_panelのスクロール位置を0にする」となっています。しかし、.bl_panelにはCSSでheight: 100vhが設定されているため、そもそもスクロールが発生しません。
実際にスクロールが発生するのはoverflow: autoを設定している.bl_panel.panelactive .bl_panel_innerなので、.bl_panel_innerにscrollTopを指定します。

$('.el_headerNav_btn__open').click(または$('.el_headerNav_btn__close, .bl_headerNav_link').click()のどちらかで$('.bl_panel_inner').scrollTop(0);を実行します。
CSSが.bl_panel.panelactive .bl_panel_innerなので、実行位置はpanelactiveをつけた後か、外す前です。

下記は開くときにつけたパターン。オープン時はclassが付いていないので、addClass`でclassをつけた後に実行します。クローズ時に実行するなら、classを外す前にscrollTopでトップに戻しておきます。

$('.el_headerNav_btn__open').click(function(){
  scrollPosition = $(window).scrollTop();
  $('body').addClass('fixed').css({'top': -scrollPosition});
  $('.bl_panel').addClass('panelactive');
  $('.bl_panel_inner').scrollTop(0);
});

お体ご自愛くださいませ。

Comments

[maronteratail]

大変ご丁寧な返信ありがとうございました！
急遽数日間入院していまして、本日退院いたしましたら回答がついていたので急いで返信致しました次第です。
完全に私事でご迷惑をおかけして大変申し訳ございませんでした！
そして初めて質問した私に、質問の仕方等もアドバイスくださり、本当にありがとうございました！
これからはsasa_さんのアドバイスを参考にし、そのコードだけで再現できるか、何をどう試してどうなったのか明確に書くことなどを心がけるようにします。
初めての質問でsasa_さんにアドバイス頂いたのはとても幸運でした。

そしてすみません。何をしたかったのかも分かりづらかったようでsasa_さんの返信を参考に修正しました。
.bl_panelのハンバーガーメニューの中身をスクロールして閉じたり、メニューの中身をスクロールしてメニューのリンクを押してメニューが閉じ、ハンバーガーメニューを再度開いたときに.bl_panelの中身をトップに戻しておきたいです。

[maronteratail]

早速のご回答ありがとうございました。
希望していたような挙動となりました。
とてもわかり易かったです。
本当にありがとうございました！