他の人がブログで公開されているものを参考にして、
内部ページリンクをJavaScriptでスムーススクーロール、およびTOPメニュー固定しているためヘッダーの高さも調整しています。
ブログ記事目次などの挙動はうまくいっているのですが、グローバルメニュー内の内部ページリンクだとうまく動作しません。
※スクロールでのリンクにならず、100px分下げている「var headerHeight = 100; //固定ヘッダーの高さ」この部分が機能していません。
Chromeのディベロッパーツールで確認してもエラーが出ていないため、原因がわかりません。
以下ソースを添付いたしますので、対処方法を教えていただないでしょうか?
よろしくお願いいたします。
JavaScript
1<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 2<script type="text/javascript"> 3// ヘッダーメニュー 4(function($) { 5 $(function() { 6 var $header = $('#top-head'); 7 8 // Nav Toggle Button 9 $('#nav-toggle').click(function(){ 10 $header.toggleClass('open'); 11 }); 12 13 $('#global-nav a').on('click', function(){ 14 if (window.innerWidth <= 768) { 15 $('#nav-toggle').click(); 16 } 17 }); 18 }); 19 })(jQuery); 20// スムーズスクロール 21$(function(){ 22 $('a[href^=#]').click(function() { 23 var speed = 300; 24 var href= $(this).attr("href"); 25 var target = $(href == "#" || href == "" ? 'html' : href); 26 var headerHeight = 100; //固定ヘッダーの高さ 27 var position = target.offset().top - headerHeight; //ターゲットの座標からヘッダの高さ分引く 28 $('body,html').animate({scrollTop:position}, speed, 'swing'); 29 return false; 30 }); 31}); 32</script>
HTML
1<header id="top-head"> 2 <div class="inner"> 3 <div id="mobile-head"> 4 <a href="https://yzan.jp/"> 5 <span class="logo"><img src="https://yzan.jp/wp-content/uploads/2018/01/logo.png"></span> 6 </a> 7 <div id="nav-toggle"> 8 <div> 9 <span></span> 10 <span></span> 11 <span></span> 12 <p class="mobile">メニュー</p> 13 </div> 14 </div> 15 </div> 16 <nav id="global-nav"> 17 <div class="menu-test-container"> 18 <ul id="menu-test" class="menu"> 19 <li id="menu-item-426" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-426"><a href="//yzan.jp/#blog">Yzanブログ<span class="gf"></span></a></li> 20 <li id="menu-item-651" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-651"><a href="//yzan.jp/#philosophy">Yzanの理念<span class="gf"></span></a></li> 21 <li id="menu-item-652" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-652"><a href="//yzan.jp/#business">ビジネス<span class="gf"></span></a></li> 22 <li id="menu-item-653" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-653"><a href="//yzan.jp/#people">Yzanと人<span class="gf"></span></a></li> 23 <li id="menu-item-4698" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4698"><a href="https://yzan.jp/djyzan">DJわいざん official<span class="gf"></span></a></li> 24 <li id="menu-item-4699" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-4699"><a href="https://yzan.jp/archives/category/popular_articles">人気記事<span class="gf"></span></a></li> 25 <div class="mobile nav_search"> 26 <form role="search" method="get" id="searchform" class="searchform cf" action="https://yzan.jp/" > 27 <input type="search" placeholder="検索する" value="" name="s" id="s" /> 28 <button type="submit" id="searchsubmit" ><i class="fa fa-search"></i></button> 29 </form> 30 </div> 31 </ul> 32 </div> 33 </nav> 34 </div> 35</header>
回答1件
あなたの回答
tips
プレビュー