JQueriy スムーススクロールと Bootstrap との共存

JQuery でページ内リンクなどの場面でスムーススクロールを実現しようとする場合は、一般的には以下のようなコードを書きます。

$(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;
   });
 });

しかし、冒頭の a[href^=”#”] のクリックイベントが、Bootstrap での一部書式とバッティングしてしまい、Bootstrap 側の機能が動作しないことがあります。

ー例として、Collaspe や Modal、Tab なんかが動かなくなります。

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Link with href</a>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit,
    enim eiusmod high life accusamus terry richardson ad squid.
  </div>
</div>

上記が Collaspe の際のサンプルコードですが、href 箇所の “#collapseExample” が先ほどの JQuery 側のa[href^=”#”] と競合してしまうのです。

これを回避するには、スムーススクロール設定側のコードで、Bootstrap の特定の書式を例外指定してあげれば共存可能になります。

$(function(){
   $('a[href^="#"]').not(".dropdown-toggle,[data-toggle='modal'],[data-toggle='collapse'],[data-toggle='tab']").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;
   });
 });

以上の .not(“.dropdown-toggle,[data-toggle=’modal’],[data-toggle=’collapse’],[data-toggle=’tab’]”) という箇所が例外を定義している箇所です。

A タグの中に、[data-toggle=’modal’] という文字や [data-toggle=’collapse’] などの文字がある場合は、not、処理しないよ、という命令を追加しています。

これで bootstrap とスムーススクロールが共存できるようになります。