前提・実現したいこと
ハンバーガーメニューのページ内リンクをクリックしたらメニューを閉じてアンカーで指定箇所まで飛ばしたいです。
今はアンカーリンクをクリックしてもclickが反応しません。
該当のソースコード
HTML
1 <div class="smp_nav"> 2 <nav> 3 <ul class="gNav"> 4 <li><a href="#ABC">メニュー1</a></li> 5 <li><a href="/">メニュー2</a></li> 6 <li><a href="/">メニュー3</a></li> 7 </ul> 8 </nav> 9 </div><!-- /.smp_nav--> 10 <a class="toggle" href="#"> 11 <span></span> 12 <span></span> 13 <span></span> 14 </a> 15 </div><!-- /#header --> 16 17<section="ABC"> 18</section> 19
メニュー1を押したときに<section="ABC">の位置まで飛ばしたいです。
Javascript
1 2// スマホメニュー 3$(function() { 4 $('.toggle').click(function() { 5 $(this).toggleClass('active'); 6 $(this).toggleClass("open"); 7 $(".smp_nav").toggleClass("openNav"); 8 $('.smp_nav li').hide(); 9 $('.smp_nav li').hide(); 10 $('.smp_nav li').each(function(i) { 11 $(this).delay(50 * i).fadeIn(500); 12 }); 13 if ($(this).hasClass('active')) { 14 $('.smp_nav').addClass('active'); //クラスを付与 15 } else { 16 $('.smp_nav').removeClass('active'); //クラスを外す 17 } 18 }); 19}); 20
CSS
1 .toggle { 2 display: block; 3 position: fixed; 4 right: 10px; 5 top: 0; 6 width: 40px; 7 height: 40px; 8 cursor: pointer; 9 z-index: 2; 10 } 11 .toggle span { 12 display: block; 13 position: absolute; 14 width: 40px; 15 border-bottom: solid 6px #000000; 16 -webkit-transition: .35s ease-in-out; 17 -moz-transition: .35s ease-in-out; 18 transition: .35s ease-in-out; 19 left: 6px; 20 } 21 .toggle span:nth-child(1) { 22 top: 9px; 23 } 24 .toggle span:nth-child(2) { 25 top: 22px; 26 } 27 .toggle span:nth-child(3) { 28 top: 36px; 29 } 30 .toggle.active span:nth-child(1) { 31 top: 18px; 32 left: 6px; 33 -webkit-transform: rotate(-45deg); 34 -moz-transform: rotate(-45deg); 35 transform: rotate(-45deg); 36 } 37 .toggle.active span:nth-child(2), 38 .toggle.active span:nth-child(3) { 39 top: 18px; 40 -webkit-transform: rotate(45deg); 41 -moz-transform: rotate(45deg); 42 transform: rotate(45deg); 43 } 44 .onanimation{ 45 display: block; 46 } 47 .smp_nav { 48 position: fixed; 49 right:0; 50 top:13vw; 51 width:100%; 52 z-index:0; 53 opacity: 0; 54 display: none; 55 background: #F9F8F3; 56 height: 100%; 57 overflow: auto; 58 -webkit-overflow-scrolling: touch; 59 } 60 .smp_nav.openNav{ 61 display: block; 62 animation-name:navshow; 63 animation-duration:0.75s; 64 opacity: 1; 65 border-top: 1px solid #000000; 66 text-align:left; 67 } 68
当初はメニューはすべて外部リンクだったのですが、急遽ページ内のアンカーリンクに変わってしまい、すぐに対応できずにいます。
似たような質問を見たり調べたりしましたがうまくいきません。
ご教授いただないでしょうか。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。