質問: 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(); }); ``` のようにしてみたのですが、クリックイベントは取得できますがやはりスムーススクロールは適用されず、普通の遷移としてしか動かないという状況でした。
回答: 自己解決いたしました。 ベタですが、アンカーリンクなのか否かで分岐して、 アンカーリングだったら素直にスムーススクロールを適用、 そうでなかった場合、現在のlocationからパス部分を取得して、 リンク先のパス部分と比較。 一致した場合はパス部分を削除してアンカーのみにしてからスムーススクロールを適用、 そうでなかった場合(別ページリンクの場合)はそのままreturnして、 別ページだったときのスムーススクロールに渡すようにしました。 ↓こんな感じです。 ``` if(アンカーリンクの場合){ //普通にスムーススクロールを適用 }else{ if(現在のURLがリンク先のパスと同じ場合){ //href属性からパス部分を削除してからスムーススクロールを適用 }else{ return; } } ``` コード自体はリファクタリングの余地があるかと思いますが、 とりあえず要件は満たしたのでひとまず解決とさせていただきます。