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

Question

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

---追記---

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

$(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を適用するにはどうしたらいいのか分からず困っております。
どなたかお知恵をお貸しいただけないでしょうか？

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

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

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

Answer 1

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

Comments

[aKusano]

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

[aKusano]

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

[x_x]

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

[aKusano]

はいそうです。

[x_x]

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

Answer 2

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

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

Answer 3

自己解決いたしました。

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

↓こんな感じです。

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

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

Answer 4

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

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