回答編集履歴

コード変更/文章変更

2021/11/07 11:16

投稿

sasa_

スコア140

test CHANGED Viewed

@@ -1,260 +1,40 @@
-先のコメントにありましたように、最低限問題の事象が再現できるコードをご提示いただくと良いと思います。ご自身の開発環境でご質問のコードのみで構成されたhtmlファイルを作成してみたとき、質問内容と同じ状況は確認できないはずです。
+コードの修正を受け、再度回答させていただきます。
-お急ぎの気持ちは大変よく分かりますが、問題の切り分けができていないと別な部分に問題がある場合に解決できません。
-また、回答者に「丸投げの質問」に感じられることがあります。そのような場合はサイトの趣旨と異なるため回答は少なくなります。
-また、試したことは「意味がありませんでした」では構文エラーなのか、動かなかったのか、動いたが期待する動作でなくどのように動いたのかが分かりません。ご期待に沿う回答をするために、意味がなかった「理由・原因」を知りたいのです。
+開いたメニュー側をトップに戻したいとのことなので、「openをクリックしたとき、メニューを入れた要素のスクロール位置を0にする」または「closeするとき、メニューを入れた要素のスクロール位置を0にする」処理を行うと良いかと思います。
-以下、ちょっと長いのですが...読みにくかったらごめんなさい。
-JavaScriptは問題と思われる部分のみ解説しています。clickイベントやfunctionの意味や書き方について不明な点はご自身でお調べ頂けますと幸いです。
-下記CSSはご質問の内容から最低限必要と思われるCSSです。
+現在のJavaScriptは「クローズしたとき、`.bl_panel`のスクロール位置を0にする」となっています。しかし、`.bl_panel`にはCSSで`height: 100vh`が設定されているため、そもそもスクロールが発生しません。
-（ご相談の内容と異なっていたらすみません！）
+実際にスクロールが発生するのは`overflow: auto`を設定している`.bl_panel.panelactive .bl_panel_inner`なので、`.bl_panel_inner`にscrollTopを指定します。
-```CSS
-.bl_panel {
+`$('.el_headerNav_btn__open').click(`または`$('.el_headerNav_btn__close, .bl_headerNav_link').click()`のどちらかで`$('.bl_panel_inner').scrollTop(0);`を実行します。
-    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 {
+CSSが`.bl_panel.panelactive .bl_panel_inner`なので、実行位置は`panelactive`をつけた後か、外す前です。
-    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%;
-}
-/* 再現用 */
-/* ヘッダーを可視化 */
-header#ly_header {
-    width: 100%;
-    height: 100px;
-    position: sticky;
-    top: 0;
-    left: 0;
-    background: #333;
-}
-.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;
-}
-```
-下記HTMLはbody内に必要と思われるCSSです。
-```HTML
-  <header id="ly_header">
-    <div class="ly_header_inner">
-      <div class="el_headerNav_btn el_headerNav_btn__open"></div>
-      <div class="bl_panel">
-        <div class="bl_panel_inner">
-          <div class="el_headerNav_btn el_headerNav_btn__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="#about" class="bl_headerNav_link">ABOUT</a>
-                </li>
-                <li class="bl_headerNav_item blurTrigger">
-                  <a href="#menu" class="bl_headerNav_link">MENU</a>
-                </li>
-                <li class="bl_headerNav_item blurTrigger">
-                  <a href="#contact" class="bl_headerNav_link">CONTACT</a>
-                </li>
-                <li class="bl_headerNav_item blurTrigger">
-                  <a href="#blog" class="bl_headerNav_link">BLOG</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="about">ABOUT</div>
-  <div class="content" id="menu">MENU</div>
-  <div class="content" id="contact">CONTACT</div>
-  <div class="content" id="blog">BLOG</div>
-```
-問題のJavaScriptですが、どの要素に対してscrollTopを指定しましたか？
-close用の要素にscrollTopを指定することでTOPに戻ることができます。
-下記は`.el_headerNav_btn__close` をクリックしたとき、「トップにスクロールする」「`.panelactive` を削除する」の２つの処理を実行します。
+下記は開くときにつけたパターン。オープン時はclassが付いていないので、addClass`でclassをつけた後に実行します。クローズ時に実行するなら、classを外す前にscrollTopでトップに戻しておきます。
 ```JavaScript
+$('.el_headerNav_btn__open').click(function(){
+  scrollPosition = $(window).scrollTop();
-    $('.el_headerNav_btn__close').on('click', function() {
+  $('body').addClass('fixed').css({'top': -scrollPosition});
-        $('body, html').animate({
+  $('.bl_panel').addClass('panelactive');
-          scrollTop: 0
+  $('.bl_panel_inner').scrollTop(0);
-        }, 300);
-        $('.bl_panel').removeClass('panelactive');
-    });
+});
-```
-このとき、下記のように`.el_headerNav_btn__close, .bl_headerNav_link` と指定すると期待通りに動きません。ナビゲーションリンクをクリックしたときも動作対象に含まれるためです。
-ナビゲーションリンクをクリックしてTOPに戻っては意味がありません。
-```JavaScript
-    $('.el_headerNav_btn__close, .bl_headerNav_link').on('click', function() {
-        $('body, html').animate({
-          scrollTop: 0
-        }, 300);
-       $('.bl_panel').removeClass('panelactive');
-    });
 ```
@@ -262,44 +42,4 @@
-この問題は、たとえば「開くボタンをクリックしたとき「閉じるボタンをクリックしたとき」「リンクをクリックしたとき」それぞれに処理を指定することで解決できます。
-分かりやすくそれぞれのclickイベントに対して個別に処理したものが下記です。
-ご相談の、「閉じるボタンでTopに戻る」はこちらで解決できるのではないかと推察いたします。
-```JavaScript
-// 開くボタンをクリックしたとき
-$('.el_headerNav_btn__open').on('click', function() {
-    $('.bl_panel').addClass('panelactive');
-});
-// 閉じるボタンをクリックしたとき
-$('.el_headerNav_btn__close').on('click', function() {
-    $('body, html').animate({
-      scrollTop: 0
+お体ご自愛くださいませ。
-    }, 300);
-    $('.bl_panel').removeClass('panelactive');
-});
-// ナビリンクをクリックしたとき
-$('.bl_headerNav_link').on('click', function() {
-    $('.bl_panel').removeClass('panelactive');
-});
-```