縦長のウェブデザインを構築する際に真っ先に導入を検討すべきjQueryプラグイン。それが［ScrollMenu.js］です。

まずはサンプルをご覧ください。

［ScrollMenu.js］：実装サンプル

ページのスクロール量に合わせてナヴィゲーション部分もスクロールし、ページ内のどの部分が表示されているかも確認できます。
また、各セクションの数がいくつあるのかも確認できるようになっています。

実装は比較的簡単なので初心者の練習にも良いかもしれません。

まずは公式サイトからプラグイン一式をダウンロードしてきましょう。

ダウンロード：ScrollMenu.js

ダウンロードしてきたファイルのうち「scrollmenu.css」「scrollmenu.js」を <head>〜</head> 内で読み込みます。
またこのとき「jquery.js」も同時に読み込んでおきます。なおjQueryのヴァージョンは「1.7」以上に対応しているようです。

<head>
<link rel="stylesheet" href="scrollmenu.css">
<script src="jquery.js"></script>
<script src="scrollmenu.js"></script>
</head>

コンテンツ部分は以下のように作り込んでいきます。

<body>
<section class="section" id="section1">
Section 1
</section>

<section class="section" id="section2">
Section 2
</section>

<section class="section" id="section3">
Section 3
</section>

<section class="section" id="section4">
Section 4
</section>

<section class="section" id="section5">
Section 5
</section>
</body>

最後に［ScrollMenu.js］のセットアップです。
今回のサンプルでは下記のコードを使用。公式サイトで紹介されていたものをそのまま流用しています。

var setupOption = {
	template: '<div class="menu-wrap"><div class="menu"><%= label %></div></div>',
	menuType: 'horizontal',
	anchorSetup: [
		{
		backgroundColor: "#dc767d",
		label: "Section 1"
		},
		{
		backgroundColor: "#36d278",
		label: "Section 2"
		},
		{
		backgroundColor: "#22cfc6",
		label: "Section 3"
		},
		{
		backgroundColor: "#8794a1",
		label: "Section 4"
		},
		{
		backgroundColor: "#1ccdaa",
		label: "Section 5"
		}]
};
var scrollMenu = ScrollMenu(setupOption);

オプションもいくつか用意されており、ナヴィゲーションの位置や表示・非表示などを設定できるようになっています。

  • sectionClass
  • menuType
  • appendTo
  • animateOnScroll
  • animationDuration
  • nativeScroll
  • scrollbarVisible
  • scrollAnchorSpacing
  • anchorSetup

以上。
単純に縦長のウェブサイトだけでなく、レスポンシヴ・デザインとの相性も良さそうなので、ぜひ導入を検討してみてください。

［ScrollMenu.js］：実装サンプル