カテゴリー
Code Templates

スムーススクロール 特定のリンク aタグを除外する

スムーススクロールのjs

<script>
  $(function(){
    // #で始まるアンカーをクリックした場合に処理
    $('a[href^="#"]').not('.class').not('#id a').click(function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top - 15;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
    });
  });
</script>

スムーススクロールのスクリプトでは#で始まるaタグの場合すべてスクロールが効いてしまう。

#だけのaタグの場合(アンカー先がない、モーダルや表示スクリプトなど)、ページトップ(#)へスクロールしてしまう。
ページトップへスクロールしてしまうのを止めたいとき、notで特定のタグを除外できる。

$('a[href^="#"]').not('.class').not('#id a').click(function() {

スムーススクロール(除外するものをnotに)
特定のリンクをスムーススクロールさせないように除外させる
[jQuery]特定のリンクを除外しつつページ内スクロール【2017/03/29追記】

コメントを残す

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