毎回めちゃくちゃ時間を取られるので、ほぼ自分用に覚書です。
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以外ならこちら
ここ最重要！↓↓↓
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｜レンタルサーバーナレッジ
knowledge.cpi.ad.jp