前提・実現したいこと
iPhone、iPadでページ内リンクのスムーズスクロールと、ハンバーガーメニュー(ページ内リンク)を開き、リンクをクリックするとメニューですが閉じるようにしたいです。
htmlとcssがやっと少しわかるようになってきたレベルで、jQueryやjavascriptに関してはまるで理解ができていないです。お手柔らかにお願いします...
発生している問題・エラーメッセージ
iPhone、iPad実機でjQueryが効きません。ディベロッパーツールでは動きます。
該当のソースコード
こちらはcssのみで作ったハンバーガーメニューをクリックすると閉じるようにしたく、
こちらの記事を参考に、元々作っていたところにclassとidを追加しました。
https://yuntu-tek.com/hamburger-menu/#i-4
<nav id="hamburger" class="hamburger header hidden drawer-content"> <input type="checkbox" id="menu-btn-check"> <label for="menu-btn-check" class="menu-btn"> <span></span></label> <div class="menu-content" id="menu-content"> <ul class="drawer-list"> <li class="drawer-item"><a href="#top">TOP</a></li> <li class="drawer-item"><a href="#about">ABOUT</a></li> <li class="drawer-item"><a href="#schedule">SCHEDULE</a></li> <li class="drawer-item"><a href="#gallery">GALLERY</a></li> <li class="drawer-item"><a href="#blog">BLOG</a></li> <li class="drawer-item"><a href="#faq">FAQ</a></li> </ul> </nav>
それからHTMLの<head>の中に以下を記述しました。
<script> $(function() { $('.drawer-item>a').click(function() { $('#menu-btn-check').removeAttr('checked').prop('checked', false).change(); }).css('cursor','pointer'); }); </script>
こちらはスムーズスクロールがしたく、こちらの記事の記述を丸々コピペしました。
https://web-camp.io/magazine/archives/85351
<script> $(function(){ $('a[href^="#"]').click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); }); </script>
試したこと
ハンバーメニューの方の最後の記述.css('cursor','pointer');こちらは調べたらこれを入れると動くとおっしゃっていた方がいたのでやってみましたが動きませんでした。
どちらもディベロッパーツールでは問題なく動くのですが実機では動きません。
ハンバーガーメニューのjQueryの最後の.css('cursor','pointer');は、最初入れていなかったのですが、調べていたらこれを追記すると動きますとおっしゃっている方がいて、やってみたのですが変わりませんでした。入れ方が間違っているのでしょうか...?
全く見当違いな記述をしてしまってる可能性もありますが、何卒よろしくお願いいたします。
あなたの回答
tips
プレビュー