スムーススクロールとスライダーなどが競合した際の対処方

2018.10.15

スムーススクロールとスライダーなどが競合した際の対処方

jQuery のスムーススクロールと、画像スライダーなど何らかの要素と競合した際の対処方法を紹介します。例えば縦長のランディングページを作成した際に、スムーススクロールの <a href="#"> 要素と、flexslider のナビゲーションの矢印 <a href="#"> が競合し、ナビゲーションのネクスト、プレビューの矢印を押すと、スムーススクロールの要素と競合してしまいます。

クラスを指定して要素を除外する

flexslider など、挿入される要素が js のライブラリ内に書かれている場合、クラスを指定して競合を除外する方法があります。以下は通常のスムーススクロールです

// 通常のスムーススクロール 
$(function(){
  $('a[href^="#"].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;
  });
});

flexslider で競合してしまう、除外したいクラス a.flex-next、a.flex-prev を指定すると

// 指定クラスを除外したスムーススクロール 
$(function(){
  $('a[href^="#"]:not(a.flex-next,a.flex-prev)').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;
  });
});

のように冒頭の :not(a.flex-next,a.flex-prev)’) で、:not(〜) 内に除外するクラスを記述することで競合を除外することが可能です。

  • SERVICE

    WEB FACTORY (ウェブ・ファクトリー) は東京を拠点にするWEB/ホームページ制作会社です。国内外のアーティスト、バンド、レーベルなどのオフィシャルサイト、特設サイトを数多く手掛けております。音楽関連のコンテンツ制作は是非ともお任せ下さい!

  • Address

    〒150-0002
    東京都渋谷区渋谷2-7-14 VORT青山 5F

    Phone

    03-5464-3266
    お電話でのお問い合わせ (平日:9:00 〜 18:00)

    Email

    メールでのお問い合わせはこちらから
    webfactory.tokyo