[JS]ページ内アンカーをidだけでなくclassや要素にも指定できるスクリプト -Arbitrary anchors

Post on:2013年8月19日

ページ内リンクをアニメーションでスクロールさせるスクリプトはいろいろありますが、ちょっと機能的にいろいろある面白いjQueryのプラグインを紹介します。

ページ内アンカーは通常、要素のidを指定して#（ハッシュ）リンクで遷移させますが、idの指定以外にclassやpやfooterなどにも遷移することができます。また、リンクの記述でスクロールのスピードを設定できるので、個々にスピードを変えることもできます。

サイトのキャプチャ

Arbitrary anchors
Arbitrary anchors -GitHub

Arbitrary anchorsのデモ

スクリプトのページ自体がデモになっています。

デモのキャプチャ

デモページ

最初のページ内リンクは、中央に。

デモのキャプチャ

通常のハッシュリンクと違い、#のすぐ後に「.」があります。これは、そのclassをもった最初の要素にリンクしています。
また、右端の「#.hello｜5000」はスクロールの速度を設定しています。

リンクのパターンはさまざまなものがあり、各所に利用されています。

デモのキャプチャ

Arbitrary anchorsの使い方

実装は簡単で、classのリンクやスピード調整だけでなく、通常のハッシュリンクでもアニメーションでスクロールさせることができます。

Step 1: 外部ファイル

head内に、jquery.jsと当スクリプトを外部ファイルとして記述します。

<head>
  ...
  <script type="text/javascript" src="//code.jquery.com/jquery-2.0.3.min.js"></script>
  <script type="text/javascript" src="jquery.arbitrary-anchor.js"></script>
</head>

Step 2: HTML

HTMLはアンカー先の要素に通常通り#（ハッシュ）でリンクするように、idを加えます。
classや要素へのリンクもできますが、idを付与できるものは付与した方がよいと思います。

<header>ヘッダ</header>
<h1 id="h101">見出し</h1>
<p id="p01">パラグラフ</p>

Step 3: #（ハッシュ）リンクの指定方法

アンカーリンクの設定は、通常のidを指定する方法の他に、さまざまな方法が利用できます。

http://example.com#raptor
id「raptor」をもっている要素
http://example.com#raptor｜100
id「raptor」をもっている要素に100msの速さでスクロール
スクロールの速さはデフォルトが750msです。
http://example.com#p
最初のp要素
http://example.com##yo-man
id「yo-man」を持っている最初の要素
http://example.com#.brah
class「brah」を持っている最初の要素
http://example.com#.sup.brah
class「sub」と「brash」を持っている最初の要素
http://example.com#.sup.brah｜100
class「sub」と「brash」を持っている最初の要素に100msの速さでスクロール
http://example.com#footer
id「footer」か最初のfooter要素
http://example.com#footer｜200
footerへ200msの速さでスクロール

sponsors

top of page

©2024 coliss