Q&A
現状のソースではレイアウトが崩れ、必要なライブラリの記載がなく（jQueryなど）、動作を確認できません。
質問文にHTML全体を追記してもらえますでしょうか。CSSもあればお願いします。
その際、HTML、CSS、JavaScriptは別々のコードブロックにして頂きたいです。（一括でコピーされてしまうため）
モーダルウィンドウでメニュー画面を作成しています。
モーダルを開いている間は背景を動かさないようにして、
モーダルを閉じたら元々スクロールしていた場所に戻りたいのにどうしても上に戻ってしまいます。
勉強不足で申し訳ないんですが、お分かりになる方教えて頂きたいです。
該当のソースコード
HTML部分
<div id="header"> <div class="hamburger-back"></div> <div class="hamburger"> <span></span> <span></span> <span></span> </div> <nav class="globalMenuSp"> <table> <tr> <td colspan="2"><a href="♯">○○○</span></a></td> </tr> <tr> <td><a href="♯">○○○</span></a></td> <td><a href="♯">○○○</span></a></td> </tr> <tr> <td><a href="♯">○○○</span></a></td> <td><a href="♯">○○○</span></a></td> </tr> <tr> <td><a href="♯">○○○</span></a></td> <td><a href="♯">○○○</span></a></td> </tr> </table> </nav> </div>
css部分
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('.hamburger').click(function() { $(this).toggleClass('active'); if ($(this).hasClass('active')) { $('.globalMenuSp').addClass('active'); } else { $('.globalMenuSp').removeClass('active'); } }); }); $('.globalMenuSp a[href]').on('click', function(event) { $('.hamburger').trigger('click'); }); $(function(){ var scrollPosition; $(".hamburger").click(function() { scrollPosition = $(window).scrollTop(); $('body').toggleClass('fixed').css({'top': -scrollPosition}); return false; }); $(".globalMenuSp a[href]").on("click", function() { $('body').removeClass('fixed').css({'top': 0}); $(window).scrollTop(scrollPosition); return false; }); }); </script>/* ハンバーガーボタン */ .hamburger-back{ background: #fff; display: block; position: fixed; top: 0; right: 0; width: 55px; height: 53px; z-index: 14; } .hamburger { display : block; position: fixed; z-index : 100; right : 6px; top : 6px; width : 42px; height: 42px; cursor: pointer; text-align: center; } .hamburger span { display : block; position: absolute; width : 30px; height : 1px ; left : 6px; background : #191919; -webkit-transition: 0.3s ease-in-out; -moz-transition : 0.3s ease-in-out; transition : 0.3s ease-in-out; } .hamburger span:nth-child(1) { top: 10px; } .hamburger span:nth-child(2) { top: 20px; } .hamburger span:nth-child(3) { top: 30px; } /* ナビ開いてる時のボタン */ .hamburger.active { -webkit-transition: all 0.3s ease-in-out; -o-transition : all 0.3s ease-in-out; transition : all 0.3s ease-in-out; -webkit-transition-delay: 0.6s; -o-transition-delay : 0.6s; transition-delay : 0.6s; -webkit-transform: rotate(45deg); -ms-transform : rotate(45deg); -o-transform : rotate(45deg); transform : rotate(45deg); } .hamburger.active span:nth-child(2){ width: 0px; } .hamburger.active span:nth-child(1), .hamburger.active span:nth-child(3){ background :#191919; -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .hamburger.active span:nth-child(1){ -webkit-transform: translateY(4px); -ms-transform : translateY(4px); -o-transform : translateY(4px); transform : translateY(4px); } .hamburger.active span:nth-child(3){ -webkit-transform: translateY(-16px) rotate(90deg); -ms-transform: translateY(-16px) rotate(90deg); -o-transform : translateY(-16px) rotate(90deg); transform : translateY(-16px) rotate(90deg); } .globalMenuSp { position: fixed; z-index : 90; top : 0; right: 0; background:#f7f7f7; text-align: center; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease, visibility .6s ease; font-size: 15px; pointer-events: none; } .globalMenuSp table { border-collapse: collapse; border-spacing: 0; width: 100%; } .globalMenuSp table th,td { border: solid 1px #e0e0e0; } .globalMenuSp table td{ background: -webkit-linear-gradient(-45deg, #ffa3ff, #50f2ed); -webkit-background-clip: text; -webkit-text-fill-color:transparent; font-family: 'Poiret One', cursive; font-weight: 600; font-size: 20px; } .globalMenuSp a { display: block; padding: 8px 0; text-decoration :none; } .globalMenuSp span{ display: block; font-size: 11px; background: #a3a3a3; -webkit-background-clip: text; -webkit-text-fill-color:transparent; font-weight: normal; } /* このクラスを、jQueryで付与・削除する */ .globalMenuSp.active { opacity: 100; pointer-events: auto; } body.fixed { position: fixed; width: 100%; height: 100%; left: 0; } ```js部分
### 試したこと とにかく、沢山試しました。 付けたり、はいだり。
回答2件
0
自己解決
自己解決しました。
ありがとうございました。
var state = false; var scrollpos; $('#menu_active, #menu_nav').on('click', function(){ $('body').toggleClass('open'); if(state == false) { scrollpos = $(window).scrollTop(); $('body').addClass('fixed').css({'top': -scrollpos}); state = true; } else { $('body').removeClass('fixed').css({'top': 0}); window.scrollTo( 0 , scrollpos ); state = false; } }); new function(){ var attr ="data-tor-smoothScroll"; var attrPatt = /noSmooth/; var d = document; function addEvent(elm,listener,fn){ try{ // IE elm.addEventListener(listener,fn,false); }catch(e){ elm.attachEvent( "on"+listener ,function(){ fn.apply(elm,arguments) } ); } } addEvent(window,"load",function(){ var anchors = d.getElementsByTagName("a"); for(var i = 0 ,len=anchors.length; i<len ; i++){ if(!attrPatt.test(anchors[i].getAttribute(attr)) && anchors[i].href.replace(/\#[a-zA-Z0-9_]+/,"") == location.href.replace(/\#[a-zA-Z0-9_]+/,"")){ anchors[i].rel = anchors[i].href; //anchors[i].href = "javascript:void(0)"; anchors[i].onclick=function(){SmoothScroll(this)} } } }); }
投稿2021/03/28 12:41
総合スコア1
0
想定外のコードが呼び出されているため、ページトップにスクロールされてしまっています。
JavaScript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 2<script type="text/javascript"> 3 4$(function() { 5 $('.hamburger').click(function() { 6 // ★ハンバーガーメニューを表示切り替え 7 $(this).toggleClass('active'); 8 if ($(this).hasClass('active')) { 9 $('.globalMenuSp').addClass('active'); 10 } else { 11 $('.globalMenuSp').removeClass('active'); 12 } 13 }); 14}); 15$('.globalMenuSp a[href]').on('click', function(event) { 16 // 2.ハンバーガーメニューのリンクをクリックすると、 17 // ハンバーガーアイコンクリックイベントを発火 18 $('.hamburger').trigger('click'); 19 }); 20 21 22 23$(function(){ 24 var scrollPosition; 25 $(".hamburger").click(function() { 26 // 1. ハンバーガーアイコンクリック時に、スクロール位置を保存 27 // 3. 2.によって呼び出され、スクロールされていないためscrollPositionに0が代入される 28 scrollPosition = $(window).scrollTop(); 29 $('body').toggleClass('fixed').css({'top': -scrollPosition}); 30 return false; 31 }); 32 $(".globalMenuSp a[href]").on("click", function() { 33 $('body').removeClass('fixed').css({'top': 0}); 34 // 4. スクロール位置をscrollPosition(=0)に設定しているため、ページトップにスクロールされてしまう 35 $(window).scrollTop(scrollPosition); 36 return false; 37 }); 38}); 39</script>
ハンバーガーメニューのリンククリック時に、★のコードを実行したいのに、3のコードも実行されてしまっています。
とりあえず、下記のように修正するとよいと思います。
JavaScript
1$(function () { 2 $(".hamburger").click(function () { 3 toggleHamburger(); 4 }); 5}); 6$(".globalMenuSp a[href]").on("click", function (event) { 7 toggleHamburger(); 8}); 9 10function toggleHamburger() { 11 $(".hamburger").toggleClass("active"); 12 if ($(".hamburger").hasClass("active")) { 13 $(".globalMenuSp").addClass("active"); 14 } else { 15 $(".globalMenuSp").removeClass("active"); 16 } 17} 18 19// 以下略
投稿2021/03/26 14:42
総合スコア79
分かりやすく、詳しくありがとうございます。
頂いたコードでモーダルを閉じても上には戻らなくなりました。
出来ればモーダルが開いている間は背景をスクロールさせないようにしたいんですが、難しいでしょうか汗
こちらの環境ではモーダルが開いている間、背景はスクロールされていません。（試しに長いテキストを挿入し、モーダルを開いている間にマウスホイールをスクロールしました。モーダルを閉じると、スクロール位置は開く前と同じでした）
質問者の方の環境でどのようになっているか、または実現したいことを詳しく教えてもらえないでしょうか。
そのままその問題の2つのjsをakkie様のコードで書き換え、cromeとfirefoxでローカルでテスト、サーバーでも上げてテストしたんですが、スクロールされてしまいました。
他のjsを外してみてスクロールされてしまいました。
cssの元々の全体の設定が問題なんでしょうか。
html {
height: 100%;
}
body{
padding: 0;
margin:0;
height: 100%;
}
あなたの回答
tips
プレビュー
