【Javascript】ページ内リンクを自動で生成する＋外部ページからのアンカー付きリンクを動作させる

以前ページ内リンクを自動で生成するという処理を紹介しましたが、JavascriptによってIDの付加およびリンクの生成を行なっているため、外部からのリンクを動作させることができません（hogehoge/index.html#anc02 というリンクを設置したとしても動作しない）。

これはページロード時にはまだidの付加が完了していないことが原因ですので、アンカーリンクの生成後にハッシュ（URLの#以降）を取得し、そのIDが存在するオフセット位置にスクロールさせてやることで外部からのリンクも動作するようになります。

ページ内リンクを自動で生成するで紹介したコードの後ろに以下のようなコードを追加します。順番を間違えると動作しないので後に追加することを間違えないようにしてください。

$(function(){

$(window).on('load',function(){

var hash = "#" + location.hash.replace(/[^\w]/g, ""); //XSS対策

if($(hash).size()){

$('html,body').scrollTop($(hash).offset().top);

}

});

ページにアクセスされた際の処理の流れは

1.IDの付加およびアンカーリンクの生成
2.URLのハッシュを取得
3.ハッシュがあればそのハッシュと同じIDのオブジェクトのオフセット位置を取得
4.上記で取得した位置へスクロールさせる

となります。

なお、location.hashでURLの#移行を取得できますが、

1	$(location.hash).......;

と直接代入するような処理を行うとXSSが可能となるケースが多いのでご注意ください。
英数字のみに置換してXSSを防ぐ手法はnew XSS pattern with jQueryを参照しました。

ADs

コメントはまだありません。

【Javascript】ページ内リンクを自動で生成する＋外部ページからのアンカー付きリンクを動作させる | Wood-Roots:blog