JavaScript Web プログラミング

JQuery「Smooth scroll」とBootstrap「Carousel」を共存させて使う方法

こんにちは!シミダイ(@shimidai2100)です。

JQuery「Smooth scroll(スムーススクロール)」とBootstrap「Carousel(カルーセル)」を共存させて使う方法を紹介します。

JQueryとBootstrapはコピペで作成できるコードがネット上には多くありますが、

お互いを考慮して使わないと動作がおかしくなるので注意してください。

なおJQueryのSmooth Scrollについては以下の記事も参考にしてください。

JQuery(JavaSrcript)でページ内リンクをヌルっとスクロール(スムーススクロール)させる方法

こんにちは!シミダイ(@shimidai2100)です。 Webページでヌルっとボタンを押すと、ヌルっと動くサイトありま ...

続きを見る


Smooth scroll(スムーススクロール)の修正版JQuery

JQuery「Smooth scroll(スムーススクロール)」とBootstrap「Carousel(カルーセル)」を共存させた、

「Smooth scroll」のコードは以下になります。※コピペでOKです。

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

共存できない原因と修正のポイント

共存できない原因は、「carousel」にもid属性に”#”を使用しているからです。

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

carousel」でも”#”を使用して要素を遷移させています。

2行目のように「hred="#"」かつ「carousel-control-prevが含まれない」かつ「carousel-control-prevが含まれない」

タグをスムーススクロールのJumpボタン対象とさせるように記載します。

Bootstrapのバージョンによっては、「carousel-control」というセレクタになっていますので、動かない人は確認してみてください。

carousel」以外でも同様に「+」を使用してセレクタを追加させることは可能です。

 

関連記事

-JavaScript, Web, プログラミング

Copyright© shimidai2100 , 2020 All Rights Reserved.