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

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

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

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″>見出しその2</a>

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

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

https://knowledge.cpi.ad.jp/tech/navbar-close/

この案件を元に問い合わせる↓

必須 お名前

必須 メールアドレス

ご職業 ※お問い合わせに関係するもの

必須 電話番号※メールが届かない場合おかけすることがございます。

お問合せ内容

web制作覚え書きカテゴリの最新記事