2015年07月6日(月)

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

• 0
• 28
• 34
• 58

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

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

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

今回作成したサンプル

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

【サンプル】マウスホイールに応じて位置をフィットさせる...