ページ内リンク（アンカー）の移動を分かりやすく、スムーズにするJavaScriptライブラリ - blinkAnchor - | Blog

ページ内リンク（アンカー）の移動を分かりやすく、スムーズにするJavaScriptライブラリ - blinkAnchor -

概要

ページ内リンクをクリックするとその場所までスムーズにスクロールし、対象のエレメントをチカチカさせるスクリプトです。
今やってる商業施設の仕事でイメージマップを使ったフロアマップから同じページ内にあるショップの一覧への遷移を分かりやすくするために作ったモノで、かなり簡単なスクリプトですが、気に入ったので公開します。

サンプル

コンテンツ１

コンテンツ２

コンテンツ３

設置方法

jQuery~~とinterface elements for jQuery~~が必要です。
（interface elementsはすごいことがいっぱいできるライブラリで、それなりのファイルサイズですが必要なのは「ScrollTo」だけなので、いずれ余裕がある時にinterface elementsがなくても動くようにしたいです）2009.06.05 jQueryだけで動くように修正しました。

JavaScriptファイルの読み込み
<head>内に以下のタグを挿入します。JavaScriptのファイルのパスは実際にサーバーにアップしたパスに置き換えてください。
```
<script src="/js/jquery-1.2.6.js"></script><script src="/js/interface.js"></script><script src="/js/blinkAnchor.js"></script>	
```

適用したいリンクに「blinkAnchor」というクラスをつける

<ul><li><a href="#ANCHOR-1" class="blinkAnchor">１</a></li><li><a href="#ANCHOR-2" class="blinkAnchor">２</a></li><li><a href="#ANCHOR-3" class="blinkAnchor">３</a></li></ul><div id="ANCHOR-1">コンテンツ１</div><div id="ANCHOR-2">コンテンツ２</div><div id="ANCHOR-3">コンテンツ３</div>

利用条件

MITライセンスです。個人でも商用でも無料で利用可能です。
このスクリプトの利用により直接的または間接的に生じたいかなる損害に関しても、その責任を負いません。
まだまだ未熟者の書いたスクリプトなのでバグやおかしな書き方してる部分などあれば、是非コメントください。

ダウンロード

以下のリンクからダウンロードできます。
blinkAnchor.js.zip (4KB)

Check　

Comments