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

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

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

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

Q&A

解決済

4回答

13849閲覧

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

aKusano

総合スコア3763

jQuery

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

1グッド

1クリップ

投稿2018/09/13 15:50

編集2018/09/14 00:11

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

---追記---

HTML

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

javaScript

1$(function(){ 2 //別ページのアンカーに遷移した時 3 var urlHash = location.hash; 4 if(urlHash) { 5 var w = $(window).width(); 6 $('body,html').stop().scrollTop(0); 7 setTimeout(function(){ 8 var target = $(urlHash); 9 if(w >= 768){ 10 var position = target.offset().top-200; 11 }else{ 12 var position = target.offset().top-50; 13 } 14 $('body,html').stop().animate({scrollTop:position}, 500); 15 }, 100); 16 } 17 //自分のページのアンカーに遷移した時 18 $('a[href*="#"]').on("click",function(){ 19 w = $(window).width(); 20 var h_sp = $('.header').height(); 21 var h_pc = $('.site-header').height(); 22 var href= $(this).attr("href"); 23 var target = $(href); 24 if(w >= 768){ 25 var position = target.offset().top-h_pc; 26 }else{ 27 var position = target.offset().top-h_sp; 28 } 29 $('body,html').stop().animate({scrollTop:position}, 500); 30 }); 31});

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

---追記2---
すみません、イベント発生状況を調べていたら、(3)のパターンではそもそも記述したJSのイベントが全く発生していませんでした。。
で、よく考えたら(3)のパターンのアンカーリンクが存在する箇所はjQueryでHTMLをインクルードしている箇所でした。。
なので上記スムーススクロールを関数化して、インクルードファイルを読み込むところで

javaScript

1$('#menu').load('/common/include/menu.html',function(){ 2 smoothScroll(); 3});

のようにしてみたのですが、クリックイベントは取得できますがやはりスムーススクロールは適用されず、普通の遷移としてしか動かないという状況でした。

DrqYuto👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ブラウザから見たら "/hoge/fuga/index.html" と "/hoge/fuga/" とは別の場所です。
遷移するのが当然ではないでしょうか?

投稿2018/09/14 00:36

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aKusano

2018/09/14 00:56

/hoge/fuga/#anchor にリンクした場合、再読込されてるということでしょうか? 見た感じ再読込はしている気配はありませんし、URLにハッシュがついた状態で自分自身を 再読込すれば、別ページのアンカーにリンクした場合の方のスクリプトが発動して スムーススクロールが実行されますので、そういう意味でもあくまで「ページ内リンク」として 自分のページの中でアンカーに飛んでるだけのように思われます。 同じようにページ内リンクとして飛んでいるのに、#anchorのときにはスムーススクロールが実行され、 /hoge/fuga/#anchorのときには実行されない理由がよくわからないのです。 そもそもブラウザの仕様的に不可能なんでしょうか?
aKusano

2018/09/14 01:02

あ、もしかして/hoge/fuga/#anchorだった時に、遷移先の位置を取得するのにパス部分が邪魔になってるんですかね。自分のパスとリンク先のパスを比較して、同じだったらパス部分を削除して#anchorだけにしてからスクリプトに渡すようにすればいいということかしら?
x_x

2018/09/14 01:14

/hoge/fuga/ではなく、/hoge/fuga/index.htmlを開いて/hoge/fuga/に遷移しているんですよね?
aKusano

2018/09/14 01:17

はいそうです。
x_x

2018/09/14 01:20

/hoge/fuga/にリクエストを投げて/hoge/fuga/index.htmlを返すのはサーバーの設定によります。それを知っているのはサーバーだけです。
guest

0

別ページのアンカーリンク

こちらの場合、(特殊な仕掛けがなければ)遷移はブラウザが行いますので、遷移元に書かれたJavaScriptは、遷移先に影響しません。

投稿2018/09/13 22:23

maisumakun

総合スコア145183

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自己解決

自己解決いたしました。

ベタですが、アンカーリンクなのか否かで分岐して、
アンカーリングだったら素直にスムーススクロールを適用、
そうでなかった場合、現在のlocationからパス部分を取得して、
リンク先のパス部分と比較。
一致した場合はパス部分を削除してアンカーのみにしてからスムーススクロールを適用、
そうでなかった場合(別ページリンクの場合)はそのままreturnして、
別ページだったときのスムーススクロールに渡すようにしました。

↓こんな感じです。

if(アンカーリンクの場合){ //普通にスムーススクロールを適用 }else{ if(現在のURLがリンク先のパスと同じ場合){ //href属性からパス部分を削除してからスムーススクロールを適用 }else{ return; } }

コード自体はリファクタリングの余地があるかと思いますが、
とりあえず要件は満たしたのでひとまず解決とさせていただきます。

投稿2018/09/14 02:58

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

動くサンプル:https://jsfiddle.net/baemzdjf/

とりあえずセレクタは効いているようですよ。

投稿2018/09/13 15:54

kei344

総合スコア69400

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問