hiraku.jsで作成したスマホメニューのリンクで、リンク押下時ページ内スクロールが正常に動作しない

前提・実現したいこと

ドロワーの作成にjsプラグイン「hiraku.js」を使用しているのですが、スマホメニューのリンクの挙動がおかしく、困っています。
hiraku.jsを使用したことがある方、似たような事例で詰まった経験のある方いましたら、
正しくナビゲーションを設置する方法をご教授いただけましたら幸いです。
なお、ナビゲーションはページ内遷移（リンク位置にスクロール）となります。

詳しくは現在作成中のサイトをアップしましたので、スマホ画面のナビゲーションの挙動をご確認ください。
https://satori-log.com/product/30daystrial-final/

発生している問題・エラーメッセージ

####1. メニューのリンクを押しても画面がその位置までスクロールしない

原因：
メニューを開いたときにhiraku.jsが画面を固定しているため

自分なりの解決策：
jQueryでbodyに対して、positionとoverflow設定を初期値に指定し直すことでスクロール固定を解除

####2. スクロール固定解除後、メニューのリンクを押し、メニューを閉じたとき、画面のスクロール位置が画面最上部に戻ってしまう
原因：不明

推測：hiraku.jsの何らかの設定によるもの

自分なりの解決策の推測：hiraku.jsの初期設定をjQuery等で上書きする

####補足：

「メニューのリンクを押しても画面がその位置までスクロールしない」がそもそもの問題でして、

それを解決後に、
2. 「スクロール固定解除後、リンクを押し、メニューを閉じたとき、画面のスクロール位置が、画面最上部に戻ってしまう」が起きている状況です。
1の解決方法が正しかったのか、
また、それが正しかった場合、2はどのようにして解決すれば良いのか知っている方は教えてくださると幸いです。

エラーメッセージはありません。

該当のソースコード

該当箇所を抜粋しました。

####スマホメニューに関するHTML

HTML
1<body class="drawer drawer--right">
2    <header role="banner">
3        <!-- ハンバーガーボタン -->
4        <button type="button" class="hiraku-open-btn" id="offcanvas-btn-right" data-toggle-offcanvas="#js-hiraku-offcanvas-1" aria-expanded="false">
5            <!-- <span class="hiraku-open-btn-line"></span> -->
6            <img class="open-btn" src="img/hamburger.svg" alt="ハンバーガーボタン">
7            <img class="close-btn" src="img/batsu.svg" alt="閉じるボタン">
8        </button>
9        <!-- モバイルメニュー -->
10        <nav class="mobile-nav offcanvas-right" role="navigation">
11            <ul class="navbar-nav">
12                <li class="nav-item">
13                    <a href="#news" class="nav-link">News</a>
14                </li>
15                <li class="nav-item">
16                    <a href="#service" class="nav-link">Service</a>
17                </li>
18                <li class="nav-item">
19                    <a  href="#results" class="nav-link">Results</a>
20                </li>
21                <li class="nav-item">
22                    <a href="#qa" class="nav-link">FAQs</a>
23                </li>
24                <li class="nav-item">
25                    <a href="#price" class="nav-link">Price</a>
26                </li>
27                <li class="nav-item">
28                    <a href="#comments" class="nav-link">Comments</a>
29                </li>
30                <li class="nav-item">
31                    <a href="#contact" class="nav-link">Contact</a>
32                </li>
33            </ul>
34        </nav>
35    </header>
36</body>

####スマホメニューの動作関連

JavaScript
1$(document).ready(function () {
2  // スマホメニューの開閉
3  $(".offcanvas-right").hiraku({
4    btn:"#offcanvas-btn-right",
5    direction:"right"
6  });
7
8  // リンクを押したとき画面のロックを解除する
9  $('a[href^="#"]').click(function() {
10    $('body').css('position', 'static');
11    $('body').css('overflow', 'scroll');
12    $('body').css('overflow-y', 'scroll');
13  });
14});

####リンク押下時のスクロール動作関連

$(document).ready(function () {
  $('a[href^="#"]').click(function() {
      var speed = 400;
      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;
  });
});

試したこと

一通り調べてみたところ、似た事例が存在しました。
ただ、解決策に「PCを再起動」とありましたが、私の場合、やってみても変わりませんでした。
一応載せておきます。
https://teratail.com/questions/200664

補足情報（FW/ツールのバージョンなど）

####実行環境
・Mac
・Chrome

####プラグイン
・jQuery.3.4.1
・hiraku.js

####画面サイズ
モバイル（767px以下）

行動規範の内容に同意します

回答1件

自己解決

自己解決しました。

結論から言うと、
hiraku.jsの機能で画面が固定されていたので、メニューのリンクを押下した際に、画面固定を解除してあげればOKです。

修正の際は、jQueryで下記を記述しました。

hiraku.jsでページ内リンクを機能させる方法

JavaScript
1$(document).ready(function () {
2
3　// スマホメニューの開閉
4  $(".offcanvas-right").hiraku({
5    btn:"#offcanvas-btn-right",
6    direction:"right"
7  });
8
9  // スマホメニューを開くとき
10  $('.hiraku-open-btn').click(function() {
11
12    // ヘッダーの表示を切り替える
13    $('header').css('background-color', 'rgba(62, 62, 62, 0.7)');
14    $('.hiraku-open-btn').css('margin-left', '81.39px');
15    $('.open-btn').hide();
16    $('.close-btn').show();
17  });
18
19  // スマホメニューを閉じるとき
20  $(document).click(function(event) {
21    if(!$(event.target).closest('.offcanvas-right').length 
22    && !$(event.target).closest('.hiraku-open-btn').length) {
23
24      // ヘッダーの表示を切り替える
25      $('header').removeAttr('style');
26      $('.hiraku-open-btn').removeAttr('style');
27      $('.open-btn').show();
28      $('.close-btn').hide();
29    }
30  });
31
32  // リンクを押したとき
33  $('a[href^="#"]').click(function() {
34
35    // 画面のロックを解除する
36    $('body').css('position', 'static');
37    $('body').css('overflow', 'scroll');
38    $('body').css('overflow-y', 'scroll');
39
40    // メニューを閉じる
41    $('.js-hiraku-offcanvas-open').hide();
42    $('.js-hiraku-offcanvas-body-right').removeAttr('style');
43    
44    // ヘッダーの表示を切り替える
45    $('header').removeAttr('style');
46    $('.hiraku-open-btn').removeAttr('style');
47    $('.open-btn').show();
48    $('.close-btn').hide();
49
50    // classを初期化する
51    $('body').removeClass('js-hiraku-offcanvas-body-right');
52    $('.hiraku-open-btn').removeClass('js-hiraku-offcanvas-btn-active');
53    $('.hiraku-open-btn').attr({'aria-expanded' : 'false'});
54    $('.js-hiraku-offcanvas').removeClass('js-hiraku-offcanvas-open');
55    $('.js-hiraku-offcanvas-sidebar').removeClass('active');
56
57    // styleを初期化
58    $('html').removeAttr('style');
59    $('body').removeAttr('style');
60    $('header').removeAttr('style');
61    $('.hiraku-open-btn').removeAttr('style');
62    $('.close-btn').removeAttr('style');
63    $('.js-hiraku-offcanvas').removeAttr('style');
64  });
65
66});

ソースの説明

基本的な流れは次の通りです。

####スマホメニューを開くとき
ボタンをクリックすると実行されます。
ボタン画像の切り替えや位置調整などを行います。
この部分はリンクを機能させるのとあまり関係ないです。
任意で記述してください。

####スマホメニューを閉じるとき
スマホメニューとボタン以外の背景をクリックしたときに実行されます。
この時点で、スマホメニューを開いたときに設定したstyle設定を削除します。

####リンクを押したとき
ここが肝です。
スマホメニューのリンクをクリックしたときに実行されます。

まず、画面のロックを解除し、スクロールできるようにします。

ただし、リンクを押したときにメニューが開いたままだと、メニューを閉じた瞬間に画面スクロールが画面最上部に戻ってしまいます。
そのため、リンクを押した瞬間にメニューを閉じるという処理も追加してあげる必要があります。

次に、ボタン画像の切り替えや位置調整など、ヘッダーの表示にまつわる記述をします。
これは任意でおこなってください。

最後に、classとstyle指定を初期化し、ボタンを開く前の状態に戻します。
hiraku.jsの機能で閉じているわけではないので、ボタンを開いたときに付加されたclassはメニューを閉じても残り続けます。そのため、リンクを押した段階で明示的に削除してあげる必要があるのです。

###まとめ
説明は以上になります。

こういったJSのプラグインなどで詰まったら、基本的にはプラグインのソースをみて、対処するのが一番かもしれません。
しかし、ソースを見てもよく分からないという場合もあると思います。
その場合には、Chromeの検証ツールなどで、ボタンを押す前、押した後などを比較し、
classやstyleやプロパティの値がどう変化しているのかを見て対処していくのが良いかと思います。

投稿2019/07/22 10:40

編集2019/07/23 10:11

onoyuu

総合スコア14