[JS]ページ内のハッシュリンクの箇所のみ表示するスクリプト -Paginator

Post on:2011年8月31日

Paginatorのデモ

デモページの全部のコンテンツは、下記のようになっています。

デモページ (http://sbp.so/paginator)

ページを表示する際のURLをハッシュリンクにすると、下記のようにそのidをもったセクションのみ表示します。

デモページ (http://sbp.so/paginator#get)

[ad#ad-2]

「jquery.js」とハッシュイベントをコントロールする「jquery.hashchange.js」と当スクリプトを外部ファイルとして指定します。

<script src="jquery.js"></script>
<script src="jquery.hashchange.js"></script>
<script src="jquery.paginator.js"></script>

その箇所のみ表示するセクションをidで括ります。
※「#get」の場合

<div id="get">
<h2>Get</h2>
<p>テキスト</p>
</div>

表示するセクションのidを使用したハッシュリンクです。
※ページ内アンカー、外部からのリンク、どちらにも対応しています。

<a href="#get">get</a>