ページ内に自動でビジュアル付きのスムーズスクロールを実装する軽量なjQueryプラグインSimple Elements Mapper

珍しかったので衝動でメモ。ページ内
に自動でビジュアル付きのスクロール
を実装してくれるjQueryプラグイン・
Simple Elements Mapperです。ビジュ
アル化したい要素や色なども選択可能
でスクリプト自体も軽量です。

たまに見かけるスクロールですね。指定した要素をビジュアル化することで概ね何があるかを把握してもらえます。またライブラリ自体も3kbと軽量でシンプルです。

Simple Elements Mapper

右側に見えているピンクの何かしらが、エレメントがビジュアル化されたページスクロールです。クリックでそのエレメントの場所にページ内スクロールする、というもの。

サンプル見たほうが早いですかね。

Sample(※デモページはShotokuを使用しています)

サンプルでは、リンクと画像をビジュアル化しています。

最初は、ドラッグで動かせるのかな、とか勝手に思ってしまいました。動かせたほうが素敵かなー、やっぱり。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>

まず本体の読み込み。

<div id="navi"></div>

で、上記のようにスクロール用のボックスをマークアップします。

<script src="jquery.pagemap.js"></script>
<script>
$("#navi").pageMap({
  base: "body",
  item: "a,img",
  cursorId: "map_cursor",
  viewId:   "map_view",
  itemColor:   "#fbb0b3",
  cursorColor: "#adadad",
  viewColor:   "#a7e6fa"
});
</script>

最後にスクリプトと設定項目を記述します。itemはビジュアル化するエレメントの指定です。セレクタでも勿論指定できます。ちゃんと動作させるには先程のマークアップより下部に配置する必要があるので置き場所はフッターあたりがいいんじゃないかなと。

#navi {
  position: fixed;
  left: 80%;
  top: 30px;
  width: 250px;
  height: 500px;
  cursor: pointer;
}

で、cssでビジュアル化したスクロールの配置とかを設定します。クロスブラウザで動作するんですが、IE6は position: fixed;に対応していません。

エレメントをリサイズして色を重ねるんですね・・プラグイン自体の使いどころは限られるかもしれませんがコードは結構参考になりました。

Simple Elements Mapper

※開発者さんへ・・余計なお世話だけど、サンプルには他のサイトを使ったほうがいい気がします。