【Javascript】ページ内リンクを自動で生成する

FAQページなどでよく使われるのですが、ページの上のほうに質問一覧のリンクがあって、クリックすると同一ページ内のアンカーに飛ぶという構成があります。

ユーザーとしてはなんとも思わない普通の構成ですが、制作者としては

・質問のタイトルにIDを振り
・そのIDに飛ぶ質問のみを抜き出したリンクをつくる

という同じ内容（質問の部分）を2度も入力しているのが面倒だと思ってました。

そこで「質問＋回答」のセットをつくれば、アンカーリンク部分は自動で生成してくれるというスクリプトを考えました。jQueryを使用しています。

サンプル

ADs

HTML

anchor_loadというidの要素に質問一覧を生成します。

Now Loading....

</div>

<h2>タイトルが入りますその1</h2>

<p>コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。</p>

</div>

<h2>タイトルが入りますその2</h2>

<p>コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。コメントが入ります。</p>

</div>

<h2>タイトルが入りますその3</h2>

</div>

<h2>タイトルが入りますその4</h2>

</div>

<h2>タイトルが入りますその5</h2>

</div>

javascript

質問（ここではh2）に対して連番でIDを振り、テキストを取得してアンカーリンクに仕立てて指定IDにappendします。

(function($){

$(function(){

var anchor = $('#anchor_load'); //アンカーリンクを設置する要素

var title = $('#main .module h2'); //アンカーの対象となる見出し要素

//変数初期化

anctext = '';

$.each(title,function(key,value){

//ID名を定義

var id = 'anc' + key; //anc01,anc02....となる

//それぞれのタイトルにIDを振る

$(this).attr('id',id);

//アンカーリンク用のテキストを定義

anctext += '<li><a href="#' + id + '">' + $(this).text() + '</a></li>';

});

//上記で定義したアンカーリンクを設置する要素内に突っ込む

anchor.empty().append('<ul>' + anctext + '</ul>');

});

})(jQuery);

ADs

スムーススクロール

WordPressでつくる会員制Webサービスのつくり方【会員管理編】

Post Comments コメントをキャンセル

Comments

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

【Javascript】ページ内リンクを自動で生成する | Wood-Roots:blog

ページ内リンクを自動で生成する