Nakajiman Software Blog: Interface Elements の Scrollto でページ内リンクを快適スムースに！

2007-09-26

Interface Elements の Scrollto でページ内リンクを快適スムースに！

Postal Search Ajax API リファレンスのページ内リンクのジャンプを Interface elements for jQuery の Scrollto を使って、スムースにスクロールするようにしました。

いわゆる普通のページ内リンクだと、即ジャンプしてしまうので、油断しているとページ内のどこにジャンプしたのか判断できなくなることがありました。が、Scrollto を使ってスクロールするようにしたところ、ページ内リンクの振る舞いが視覚的になり、何が起こっているのか判断しやすくなりました。

実例を見る

Scrollto を使ったスクロールは、次のようなページ内リンクがあったとすると、

<a href="#Postal">Postal オブジェクト</a>

そのスクロール先は、ページ内リンクで指定した # 以降の id を持つ要素になります。ページ内リンクは name 属性を使うことが多いようですが、Scrollto を使うときは id 属性である必要があります。

<a id="Postal"></a>

Interface elements for jQuery のロードは、次のように interface.js を指定するか、

<script type="text/javascript" src="interface.js"></script>

もしくは、次のように iutil.js、ifx.js、ifxscrollto.js を指定します。

<script type="text/javascript" src="iutil.js"></script>
<script type="text/javascript" src="ifx.js"></script>
<script type="text/javascript" src="ifxscrollto.js"></script>

後はページ内リンクを含む要素に対して、ScrollToAnchors メソッドを呼び出すだけで完了です。

ScrollToAnchors メソッドの第1引数はスクロール速度です。'slow'、'normal'、'fast' かミリ秒を数値で指定します。

第2引数はスクロールの方向軸です。'vertical' か 'horizontal' を指定します。省略したときは、スクロール先に最短距離で(スクロール先が斜め方向なら斜めに)スクロールします。

<script type="text/javascript">
jQuery(function($) {
  $('#content')
    .find('a[@id]')
      .css('display', 'block')
      .end()
    .ScrollToAnchors('slow');
});
</script>

上の例では a タグを block 要素に変更しています。これは Opera 9 向けの対応です。Opera 9 ではスクロール先が inline 要素だと、その要素がスクロール先にならず、ページの先頭にスクロールしてしまいました。Opera 9 を考慮するならスクロール先は block 要素にする必要があります。