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;
});
});