質問: target.offset().top; $('html, body').animate({scrollTop: position}, speed, 'swing'); return false; }); }); ``` ### 試したこと 一通り調べてみたところ、似た事例が存在しました。 ただ、解決策に「PCを再起動」とありましたが、私の場合、やってみても変わりませんでした。 一応載せておきます。 ### 補足情報(FW/ツールのバージョンなど) 実行環境 ・Mac ・Chrome プラグイン ・jQuery.3.4.1 ・hiraku.js 画面サイズ モバイル(767px以下)
回答: 自己解決しました。 結論から言うと、 hiraku.jsの機能で画面が固定されていたので、メニューのリンクを押下した際に、画面固定を解除してあげればOKです。 修正の際は、jQueryで下記を記述しました。 hiraku.jsでページ内リンクを機能させる方法 ``` $(document).ready(function () { // スマホメニューの開閉 $(".offcanvas-right").hiraku({ btn:"#offcanvas-btn-right", direction:"right" }); // スマホメニューを開くとき $('.hiraku-open-btn').click(function() { // ヘッダーの表示を切り替える $('header').css('background-color', 'rgba(62, 62, 62, 0.7)'); $('.hiraku-open-btn').css('margin-left', '81.39px'); $('.open-btn').hide(); $('.close-btn').show(); }); // スマホメニューを閉じるとき $(document).click(function(event) { if(!$(event.target).closest('.offcanvas-right').length && !$(event.target).closest('.hiraku-open-btn').length) { // ヘッダーの表示を切り替える $('header').removeAttr('style'); $('.hiraku-open-btn').removeAttr('style'); $('.open-btn').show(); $('.close-btn').hide(); } }); // リンクを押したとき $('a[href^="#"]').click(function() { // 画面のロックを解除する $('body').css('position', 'static'); $('body').css('overflow', 'scroll'); $('body').css('overflow-y', 'scroll'); // メニューを閉じる $('.js-hiraku-offcanvas-open').hide(); $('.js-hiraku-offcanvas-body-right').css('left', '0'); // ヘッダーの表示を切り替える $('header').removeAttr('style'); $('.hiraku-open-btn').removeAttr('style'); $('.open-btn').show(); $('.close-btn').hide(); // classを初期化する $('body').removeClass('js-hiraku-offcanvas-body-right'); $('.hiraku-open-btn').removeClass('js-hiraku-offcanvas-btn-active'); $('.hiraku-open-btn').attr({'aria-expanded' : 'false'}); $('.js-hiraku-offcanvas').removeClass('js-hiraku-offcanvas-open'); $('.js-hiraku-offcanvas-sidebar').removeClass('active'); // styleを初期化 $('html').removeAttr('style'); $('body').removeAttr('style'); $('header').removeAttr('style'); $('.hiraku-open-btn').removeAttr('style'); $('.close-btn').removeAttr('style'); $('.js-hiraku-offcanvas').removeAttr('style'); }); }); ``` ソースの説明 基本的な流れは次の通りです。 スマホメニューを開くとき ボタンをクリックすると実行されます。 ボタン画像の切り替えや位置調整などを行います。 この部分はリンクを機能させるのとあまり関係ないです。 任意で記述してください。 スマホメニューを閉じるとき スマホメニューとボタン以外の背景をクリックしたときに実行されます。 この時点で、スマホメニューを開いたときに設定したstyle設定を削除します。 リンクを押したとき ここが肝です。 スマホメニューのリンクをクリックしたときに実行されます。 まず、画面のロックを解除し、スクロールできるようにします。 ただし、リンクを押したときにメニューが開いたままだと、メニューを閉じた瞬間に画面スクロールが画面最上部に戻ってしまいます。 そのため、リンクを押した瞬間にメニューを閉じるという処理も追加してあげる必要があります。 次に、ボタン画像の切り替えや位置調整など、ヘッダーの表示にまつわる記述をします。 これは任意でおこなってください。 最後に、classとstyle指定を初期化し、ボタンを開く前の状態に戻します。 hiraku.jsの機能で閉じているわけではないので、ボタンを開いたときに付加されたclassはメニューを閉じても残り続けます。そのため、リンクを押した段階で明示的に削除してあげる必要があるのです。 まとめ 説明は以上になります。 こういったJSのプラグインなどで詰まったら、基本的にはプラグインのソースをみて、対処するのが一番かもしれません。 しかし、ソースを見てもよく分からないという場合もあると思います。 その場合には、Chromeの検証ツールなどで、ボタンを押す前、押した後などを比較し、 classやstyleやプロパティの値がどう変化しているのかを見て対処していくのが良いかと思います。