bootstrap４でスムーススクロール+着地点をずらす方法

web制作覚え書き

毎回めちゃくちゃ時間を取られるので、ほぼ自分用に覚書です。

js

 <script  src="https://code.jquery.com/jquery-3.5.1.min.js"  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="crossorigin="anonymous"></script>

jquery slim版では動かない。必ず普通のやつ。bootstrapのそのまま持ってくるとslim版の場合があるので気を付ける。 

 <script src="js/bootstrap.bundle.min.js"></script>

bundleとはpopperと（スクロールとかドロップダウン）が使えるやつ。通常版bootstrap.jsには入ってないので注意。 必ずbundle版を入れる。

起動スクリプト

<script>
        $('a[href^="#"]' + 'a:not(".carousel-control-prev,.carousel-control-next")').click(function(){ 
        var speed = 500; 
        var href= $(this).attr("href"); 
        var target = $(href == "#" || href == "" ? 'html' : href); 
        var position = target.offset().top - 100; //ずらす分
        $("html, body").animate({scrollTop:position}, speed, "swing"); 
        return false; 
    });
  </script>

bootstrapのドロップダウンと被らないようになってる

bootstrap以外ならこちら

position:fixedでヘッダ固定時のページ内外リンクのズレを解消するテクニック - 外注・下請け専門のホームページ制作 | RunLand(ランランド)株式会社
position:fixedでヘッダ固定時のページ内外リンクのズレを解消するテクニック | RunLandは全国対応の「下請け・外注」専門のWEB制作会社です。外注パートナーをお探しなら、是非ご相談下さい。
web.runland.co.jp

ここ最重要！↓↓↓

wow.jsを入れてる場合はそれより必ず上に！！

 <script src="js/wow.min.js"></script>
        <script>
      new WOW().init();
      </script>

html

〇 →href=”#midashi1″>見出しその1</a>

× →href=”index.html#midashi2″>見出しその２</a>

bootsrtapでスマホでページ内遷移するとトグルメニューが閉じない 問題

はこちらで解決↓ありがとうございます！

Navbar クリック時にメニューを閉じる方法 : Bootstrap 4｜レンタルサーバーナレッジ
KDDIウェブコミュニケーションズのホスティング専門ブランド【CPIスタッフブログ】の「Bootstrap4の使い方特設コーナー」のNavbarクリック時にメニューを閉じる方法についてのページです。サイト制作の際によくある些細な疑問の解決に　
knowledge.cpi.ad.jp