jQueryでページ内リンクを自動生成するスクリプト | grant-simple-anchor-link.js

ページ内リンクはリンクとアンカーの設置を行わなければならないため意外と面倒なものです。
grant-simple-anchor-link.jsはJQueryを使用し、ページ内リンクにしたい要素に特定のclassを付けることでページ内リンクとリンク用のアンカーを自動で生成してくれるスクリプトです。

同じようなスクリプトは巷にたくさん公開されているでしょうが、jQueryの勉強を兼ねて作成してみました。

サンプル＆ダウンロードページ

サンプルとダウンロードページはこちらへ

設置について

設置方法はサンプルページにも書かれていますがこちらでも・・・。

ダウンロードしたファイルを解凍し、中に入っているgrant-simple-anchor-link.jsとgrant-simple-anchor-link.cssを自分のサーバーにアップロードします。

次に表示させたいページの～内でアップロードしたファイルの読込みを行います。以下はjsとcssのフォルダを作成し、それぞれアップロードした場合の例です。

もちろんjQueryを使用しているのでライブラリファイル本体も忘れずに読み込んでおいてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="js/grant-simple-anchor-link.js" type="text/javascript"></script>

これで設定は完了です。後はページ内リンクを行いたい要素にclassを付けるだけで自動的にメニューが生成されます。付けるクラス名はgrant-simple-anchor-linkと言うクラス名です。

ページ内リンクを行いたい要素

注意点等

ページ内リンクメニューは1種類しか生成できません。2種類以上のページ内リンクメニューを作りたい場合は手動で作成してください。

リンクメニューのXHTML上の挿入箇所はbody内部の一番後ろになっています。そのままでも問題無いと思いますが、都合の悪い場合は以下の部分を変更してください。

※↓ここの body を任意に変更してください。
$("body").append("");

アンカーを生成するclassは画像にも適用できますが、その時はtitle属性の文字列をリンクタイトルにとして取得します。tltle属性が無い場合はalt属性の文字列を取得します。どちらも存在しない場合は、「Move to the anchor」という文字列が適用されます。意図する文字列をリンクタイトルにしたい場合はtitleまたはalt属性に文字列を入力してください。

自動生成されるメニューのデザインを変えたい場合はgrant-simple-anchor-link.cssの中身を編集してください。