読者です 読者をやめる 読者になる 読者になる

tkhrsskの日記

技術ネタなど

Bootstrap カルーセル と jQueryのスムーズスクロール併用時の注意点

タイトルのまんまですが、Bootstrap カルーセルjQueryのスムーズスクロール併用時、左右のスライド切り替えボタンが動作しなくてはまりました。

スムーズスクロールを設定するコードが、カルーセルのコントロール処理を無効化しているのが原因でした。対策として、jQueryセレクタで、カルーセルのコントローラ .carousel-control は除外するようにしました。

$(function(){
    $('a[href^=#]'+'a:not(".carousel-control")').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;
    });
});
参考