質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

$('a[href*="#"]')で「#を含むリンク」が選択できない?

aKusano
aKusano

総合スコア0

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

4回答

1評価

1クリップ

9863閲覧

投稿2018/09/13 15:50

編集2022/01/12 10:58

通常のページ内リンク(<a href="#anchor"></a>)と、
別ページのアンカーリンク(<a href="/hoge/fuga/#anchor"></a>)の両方があり、
どちらもスムーススクロールを適用したいのですが、
$('a[href*="#"]').on("click",function(){.....})と書いたところ
通常のページ内リンクにしか効いていない状態でした。
a[href*="#"]とすれば「#を含む」と判定されそうなものですが、
なぜ効かないのでしょう…?

---追記---

HTML

<!-- 現在のページは/hoge/fuga/index.htmlという前提 --> (1)<a href="/hoge/hage/#anchor">別ページのアンカーへリンク</a> (2)<a href="#anchor">普通のページ内リンク</a> (3)<a href="/hoge/fuga/#anchor">自分自身へのパス付きアンカーリンク</a>

javaScript

$(function(){ //別ページのアンカーに遷移した時 var urlHash = location.hash; if(urlHash) { var w = $(window).width(); $('body,html').stop().scrollTop(0); setTimeout(function(){ var target = $(urlHash); if(w >= 768){ var position = target.offset().top-200; }else{ var position = target.offset().top-50; } $('body,html').stop().animate({scrollTop:position}, 500); }, 100); } //自分のページのアンカーに遷移した時 $('a[href*="#"]').on("click",function(){ w = $(window).width(); var h_sp = $('.header').height(); var h_pc = $('.site-header').height(); var href= $(this).attr("href"); var target = $(href); if(w >= 768){ var position = target.offset().top-h_pc; }else{ var position = target.offset().top-h_sp; } $('body,html').stop().animate({scrollTop:position}, 500); }); });

HTML(ダミー)とJSを追記しました。
HTMLには(1)〜(3)の3パターンのアンカーリンクが存在しており、その全てにSmoothScrollを適用したいのですが、
現状(1)(2)は問題なく適用されますが、(3)はSmoothScrollが適用されず、ただの遷移として動作してしまいます。
通常のページ内リンクにおけるSmoothScrollはセレクタを$('a[href^="#"]')として「#で始まっているhref属性を持つa要素」を対象としていますので、パス付きアンカーにも適用させようと思って$('a[href*="#"]')として「#を含んでいるhref属性を持つa要素」を対象にしてページ内リンクしたらなー、と思ったのですが駄目のようです。
(3)のパターンでSmoothScrollを適用するにはどうしたらいいのか分からず困っております。
どなたかお知恵をお貸しいただけないでしょうか?

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。