Web制作で役立つメモをWEB MEMO LOG

2016.12.07

【JS】jQueryで特定の要素(セレクタ)を対象外にする方法

jQueryで動作を設定しているけど、特定の要素のみ動作を行いたくない場合があるかと思います。
例えば、「#」のリンクをクリックしたときにページ内でスルスルとスクロールするjQueryを使用していた場合、特定の要素(タブメニュー等)のみスルスルと移動するのを無効にする方法をメモメモ。

▼特定の要素のみページをスルスルとしない方法

//scroll
$(function(){
   var notList = '.no_scroll a';// スクロールしたくない要素を設定
   var headerHeight = 50; //ヘッダの高さ
   var speed = 400; //スクロールするスピード
   
   /*ページ内#リンク*/
   $('a[href^=#]').not(notList).click(function() {
      // スクロールの速度 ミリ秒
      var href= $(this).attr("href");// アンカーの値取得
      var target = $(href == "#" || href == "" ? 'html' : href);// 移動先を取得
      var position = target.offset().top-headerHeight;// 移動先を数値で取得
      $('body,html').animate({scrollTop:position}, speed, 'swing');// スムーススクロール
      return false;
   });	
});

About Site

同じことを何度も検索していたりするんで、検索して解決したことを残そうと思いまして。