2016年12月7日
【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; }); });
関連記事
-
【JS】parent?parents?closest?jQueryで親要素があるか判別する方法
【JS】parent?parents?closest?jQueryで親要素があるか判別する方法
jQueryで特定の親要素があるかないかを判別して特定の処理を行いたい場合の方法をメモメモ。 ▼closestを使用して・・・ -
【JS】要素のidやclassに特定の値が設定されていたら、処理を行う
【JS】要素のidやclassに特定の値が設定されていたら、処理を行う
jQueryを使用して要素のidやclassに特定の値が設定されていた場合、bodyにclassの値を付与するなど、何か・・・ -
【JS】子要素に特定のクラスがあった場合に親要素にクラスを追加する等、jQueryでよく使うメソッド
【JS】子要素に特定のクラスがあった場合に親要素にクラスを追加する等、jQueryでよく使うメソッド
クリック時にクラスを追加するなど、よく使用するjQueryのメソッドをメモメモ。 ▼CSSの操作 [js] $(func・・・ -
【JS】ブラウザの高さを自動で取得しCSSに設定する方法
【JS】ブラウザの高さを自動で取得しCSSに設定する方法
フル画面やファーストビューでブラウザの高さいっぱいにビジュアルを表示したい場合、幅は「width:100%;」で設定でき・・・ -
【JS】jQueryでブラウザの画面サイズで処理を判定する方法
【JS】jQueryでブラウザの画面サイズで処理を判定する方法
レスポンシブサイト等で、スマホのときには特定の処理をして、PCの場合は処理をしたくない場合がありますよね。 例えば、スマ・・・