1ページのなかで各コンテンツへスクロールさせるデザインのサイト、いわゆる1ページスクロールサイトが最近ポピュラーになってきました。様々なワンページスクロールサイトがありますが、今回はjQueryを使用して、とても簡単にシンプルなワンページサイトを作る方法を紹介します。

サンプルページを作りました。

→ ワンページスクロールサイトに活用できる『Scroll to Internal Link with jQuery』サンプル


段落ごとにスクロールさせることができるので、うまく利用すれば印象的なサイトが作れると思います。

作成方法は続きをご覧下さい。





まずは、<body>部分にメニューを作成します。



続いて、メインコンテンツを作成します。



このままでは見にくいので、見やすくするためにCSSを設定します。スタイルシートに次のように記入します。以下のソースはサンプルページで使用しているシンプルな例です。



スタイルシートが出来たら、<head>部分にスタイルシートの設定をします。パスを間違えないように注意しましょう。
<link rel=”stylesheet” href=”style.css”>

最後にjQueryを設定します。<head>部分に以下のように設定します。



以上で完成です。本家サイト(Scroll to Internal Link with jQuery │ Speckyboy Design Magazine)にさらに詳しく説明があります。(英語)
また本家のサイトから、ソースファイルが一式ダウンロード出来ますので活用してみてください。

サンプルページのソースは以下の通りです。どうぞご参考まで。



スタイルシート(style.css)

この記事と関連してると思われる記事: