[JS]ページ内アンカーをidだけでなくclassや要素にも指定できるスクリプト -Arbitrary anchors
Post on:2013年8月19日
sponsors
ページ内リンクをアニメーションでスクロールさせるスクリプトはいろいろありますが、ちょっと機能的にいろいろある面白い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
