ページ内スクロールのaタグリンクをルートパスでスムーズに動かしたい

Question

下記にように同ページの際は下記のようにすれば、うまくいくのですが、

<a href="#example">EXAMPLE</a>

var headerHight = 80; //ヘッダの高さ
 $('a[href^=#]').click(function(){
     var href= $(this).attr("href");
       var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-headerHight; //ヘッダの高さ分位置をずらす
     $("html, body").animate({scrollTop:position}, 1000, "easeInOutQuart");
        return false;
   });
});

例えば、下記のようにルートパスでリンクした場合はうまくいきません。

<a href="/#example">EXAMPLE</a>

グローバルメニューなどで使用したいので、ヘッダーをインクルードして使いたいので、
ルートパスでもスムーズにスクロールできるようにしたいです。

ご教授下さい。

Answer 1

a[href^=#] は # で始まるURLを持つa要素を意味するので、a[href^="/#"],a[href^="#"]に変えて先頭の/を取ればできると思います。（ルートの場合のみに限定する必要はあると思います）

Comments

[buk]

ありがとうございます。
コードだと、どのようになるのでしょうか？

[kei344]

どの部分でしょう。

[buk]

$('a[href^=#]').click(function(){
→$('a[href^="/#"],a[href^="#"]').click(function(){
でしょうか？
また、先頭の「/」をとるというのはどこの箇所でしょうか

[kei344]

クリックはそれで採れると思います。（ルートの場合のみその方法を採るようにしてください）
「先頭の「/」をとる」は var href= $(this).attr("href"); の後で、href の先頭にある「/」を取らないと「target」が取得できないので、先頭のスラッシュを削除します。
削除の仕方は「JavaScript 文字 削除」とかで出てくると思います。

[buk]

うまくいきました。ありがとうございました。