WEB系キャンパス

ページ内リンクのスムーズスクロールを特定のリンクだけ除外する方法

ページ内リンクをシュイーンとアニメーションかける方法は以下のjQueryで設置可能。

$(function() {
  $('a[href^="#"]').click(function() {
    var speed = 400;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});

この場合だと、hrefに「#」を指定したリンクは全てスムーズスクロールが発生してしまう。
↓例えば、この記事で紹介したみたいなタブパネルとか
(K)jQueryでタブパネルを1ページに複数設置する場合の方法

<ul class="tabs">
  <li id="tab1" class="tab active"><a href="#cont1">タブ01</a></li>
  <li id="tab2" class="tab"><a href="#cont2">タブ02</a></li>
  <li id="tab3" class="tab"><a href="#cont3">タブ03</a></li>
</ul>

そういう場合は、特定のアンカーだけアニメーションを発生させないようにすればいい。

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

あとは、アニメーションをかけたくないアンカーに「noscroll」のclassを書いてあげればOK。

<ul class="tabs">
  <li id="tab1" class="tab active"><a href="#cont1” class=“noscroll">タブ01</a></li>
  <li id="tab2" class="tab"><a href="#cont2" class=“noscroll">タブ02</a></li>
  <li id="tab3" class="tab"><a href="#cont3" class=“noscroll">タブ03</a></li>
</ul>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です