2021年6月4日

Bootstrap4とjQuery3を使ったスムーススクロールの設定

Bootstrapを使っているとどうもスムーススクロールが上手く動かないことが多かったけど、今回の内容で上手く対処することが出来たのでその時のメモを残しておきます。

HTMLで設置したスクリプトコード

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/script.js"></script>

script.jsの内容

$(function(){
  // ナビゲーションをクリック
  $('a[href^="#"]:not([href="#"])').click(function(){
    // 移動先のコンテンツの位置を取得
    var target = $($(this).attr("href")).offset().top;

    // 70px減らす
    target -= 70;

    // コンテンツへスクロール
    $("html, body").animate({scrollTop : target}, 500);

    return false;
  });
});

よく起きていた問題として、ハンバーガーメニューが開かなかったり、スムーススクロールが実行されなかったりといった問題が生まれていた。

今回の設定方法でようやく正しく動作するようになった。

原因となっていたのは、jQueryのバージョン違いを同じファイルに含めていたこと、圧縮ファイルではJavaScriptコードのanimateが動作しなくなることだった。