Bootstrap4でスムーススクロールを導入する

WEB制作
Bootstrap4でスムーススクロールを導入する

Bootstrap4で何も考えずにスムーススクロールを導入するとタブなどと打つかってしまうので、それを回避するためのJSです。

a[href^="#"]では、カーセル、タブ、collapseと打つかるので:not()で回避しています。

$(function(){
  $('a[href^="#"]:not(a.carousel-control-prev, a.carousel-control-next, a.nav-link, a[data-toggle="collapse"], a[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;
  });
});

対応ブラウザは、まだ少ないですがCSSだけでもスムーススクロールの導入が可能です。

html{
    scroll-behavior: smooth;
}