ブラウザ全面を使用したページでスクロール位置を自動的に一定の場所にスナップさせる【jQuery連載14】

最近のウェブサイト構造の1つに、従来は「会社概要」「お知らせ」といった系統のことなるコンテンツを別ページとして用意しておいた構造から、それらをすべて同じページに配置してみせるシングル（単一）ページという構造もよく見られるようになりました。

シングルページは、ページ遷移の面倒さや待ち時間にストレスからくるユーザーのサイト離脱を防ぐ事ができ、また最近のスマートフォンでのサイト閲覧においても、片手でスムースにスピーディに情報を得る事ができるので、とくに新商品、新サービスのキャンペーン系の特設サイトやランディングページに適した構造と言えるでしょう。

しかし、こういったシングルページサイトの構造は、どこからどこまでは1つの情報になるのかが分かりにくい場合があります。もちろん、デザインでそれを分かりやすく伝える事は大切でありますが、伝え手側がうまくユーザを誘導するようにすることも1つの方法です。今回はシングルページ内のそれぞれのコンテンツの適正な位置に、自動的にユーザを誘導する仕組みを実装してみます。

今回作成したサンプル

画像ではわかりにくいのでサンプルをみてもらうと、スクロールして止めるとそのまま止まらずにどちらかの先頭に自動フィットするようになっている。

【サンプル】マウスホイールに応じて位置をフィットさせる
http://www.html5-memo.com/sample/jq-books/15/sample_basic.html

表示領域の位置補正を行うwindowsプラグインについて

ユーザーがサイトを閲覧しているときに、自動的にスクロール位置を適正な位置に補正する時、あたかも何かに吸い付くような動きをすることから「スナップ」するとも表現され、今回サンプルに使用したwindowsプラグインはそういった用途に利用できるjQueryプラグインで、スナップスピードやタイミングを制御できるオプションなども用意されている。

windowsプラグインは、スナップ先としたいコンテンツ（※以下、スナップコンテンツ）を内包する要素からwindows()メソッドを実行する事で実行され、以後スナップコンテンツとユーザのスクロール位置は常に監視される。

例えば、ユーザーがページ下方向にスクロールダウンすると、それに応じてページ内に配置されたすべてのHTML要素は上方向に流れて行く、その中でスナップコンテンツも上方向に流れ、スクロールダウンを止めたときに、スナップコンテンツの縦位置がブラウザ画面表示領域（※以下、スクリーン）上端よりも少し上にはみ出てしまったとき、通常ならば、ユーザーが少し上方向にスクロールをして、要素を下方向に移動するように位置を調整しながらコンテンツを読み進めていくことになるが、windowsプラグインの機能が実行されると、スナップコンテンツに指定した要素が自動的にスクリーンの上端の位置にくるように、スクロール位置を調整してくれる。

しかし、前述のように多少の上方に行き過ぎた程度の位置のズレであれば、スナップコンテンツの始まりの位置をスクリーン上端に移動するよう補正してくれるが、そのスナップコンテンツの縦幅の半分以上の距離分上方に行き過ぎた場合はそのスナップコンテンツへの補正は行われず、次のスナップコンテンツがスクリーン上端まで上方に移動する。

逆方向も同様で、スクリーンを上方にスクロールアップすると、要素はすべて下方向に流れて行くため、スナップコンテンツの縦幅半分以上がスクリーン上端よりも下に移動していれば、さらに上方にスクロールアップされ、前のスナップコンテンツの始まりの位置まで移動されます。

文章だけだとわかりにくいため、図を参照してください。

windowsプラグインで位置補正機能を実装する

サンプル（sample_basic.html）は、各コンテンツの位置が自動補正されていることが分かりやすいようにページの背景色を色分けし、連番の番号をページの中心に設置しています。

また各コンテンツの縦幅は常にスクリーンサイズ（ブラウザ表示領域）の縦幅と一緒になるように、Javascriptで補正しています。

このような仕様にすることで、常にスクリーンの縦半分より上か下かで、スナップする方向が変わるので動作がわかりやすくなります。

<div id="contentContainer">

<div id="columnContainer">

<div id="column1" class="column">
<p class="number">1</p>
</div>
・・省略
<div id="column5" class="column">
<p class="number">5</p>
</div>

<div id="column6" class="column">
<p class="number">6</p>
</div>

</div>
<!--/ columnContainer -->

</div>
<!--/ contentContainer -->

;(function (d, $) {

  var jQdm_adjustContent;

  jQdm_adjustContent = function(){

    // 初期設定
    var prop = {
      $window: $(window),
      snapTarget: '.column',
      snapSpeed: 500,
      snapInterval: 500
    }

    function init(){

      // スナップ（位置補正）させる要素をキャッシュ
      var _$t = $(prop.snapTarget),
      _$w = prop.$window;

      // ページロード時とリサイズ時に、スナップ要素のサイズをウィンドウサイズに合わせるように設定
      _$w.on('load', function(){
        fitWindowScale(_$t);
      });
      _$w.on('resize', function(){
        setTimeout( function() {
          fitWindowScale(_$t);
        }, 200);
      });

      // スナップ対象要素にスナップ機能を付与する
      _$t.windows({
        snapping: true,
        snapSpeed: prop.snapSpeed,
        snapInterval: prop.snapInterval
      });

    }

    // 要素をウィンドウワイズにあわせる
    function fitWindowScale(_$t){
      var _w = window.innerWidth,
      _h = window.innerHeight,
      _$num = _$t.find('.number');

      _$t.css({
        height: _h
      });

      _$num.css({
        top: _h / 2 - _$num.height() / 2 - 20,
        left: _w / 2 - _$num.width() / 2
      });
    }

    // 文字列置換処理
    function replaceString(_str, _bf, _af, _flg){
      var _reg = new RegExp(_bf || '[€€.#]', _flg || '');
      return _str ? _str.replace(_reg, _af || '') : false;
    }

    init();

  };

  jQdm_adjustContent();

})(document, jQuery);

上記で紹介したサンプルの他に書籍の方ではナビゲーションを追加したパターンやコンテンツの写真を追加し、フェードで出現するパターンなども作成しております。

・ナビゲーションを追加した例
http://www.html5-memo.com/sample/jq-books/15/sample_plus_nav.html

・コンテンツに写真を追加した例
http://www.html5-memo.com/sample/jq-books/15/sample_photo.html

今回は以上になります。

今回は縦のスクロールでしたが、次回はマウスホイールに対応した横スクロールのページを作成します。