Interface Elements の Scrollto でページ内リンクをスムースにする

ホーム > Postal Search Ajax API with jQuery > Interface Elements

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 要素にする必要があります。

ただし、Interface Elements の ScrollToAnchors はページ内外リンクを区別しないため、# を指定したページ外リンクが機能しません。なんてこった。

ScrollToAnchors (ifxscrollto.js) のソースコードは次のとおりです。a 要素の href 属性で # を含むものに click イベントを仕掛けています。このとき、# 以降の文字列をスクロール先の要素の ID として使っています。このように a 要素の href 属性の URL からページ内のリンクか、ページ外のリンクか区別していないため、# 指定のページ外リンクがページ内リンクと判断されます。

    ScrollToAnchors : function(speed, axis, easing) {
      return this.each(
        function()
        {
          jQuery('a[@href*="#"]', this).click(
            function(e)
            {
              parts = this.href.split('#');
              jQuery('#' + parts[1]).ScrollTo(speed, axis, easing);
              return false;
            }
          );
        }
      )
    }

ですので、ScrollToAnchors を使わずに、次のように自前のコードを用意しました。現在のページの URL を location.href から取得し、その URL を基準として、ページ内リンクか、ページ外リンクかを区別するようにしています。そして、ページ内リンクのときだけ ScrollTo を使って、ページ内をスムーススクロールするようにしています。

var pageUrl = location.href.split('#')[0];
$('a[@href]', '#content').each(function() {
  if (this.href.indexOf(pageUrl + '#') == 0) {
    var id = this.href.split('#')[1];
    $(this).click(function() {
      $('#' + id).ScrollTo('slow');
      return false;
    });  
  }
});

Interface Elements の Scrollto でページ内リンクをスムースにする

関連情報