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

使いどころが難しそうですが、ページ内のidをもったセクションのみ表示するjQueryのプラグインを紹介します。

デモのキャプチャ

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

[ad#ad-2]

Paginatorのデモ

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

デモのキャプチャ

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

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

デモのキャプチャ

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

[ad#ad-2]

Paginatorの実装

外部ファイル

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

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

HTML

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

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

リンクの記述

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

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

sponsors

top of page

©2018 coliss