Page1

縦スクロールのデモ

このページは、Webロケッツマガジンの記事で使用しているデモです。
このデモは、コンテンツを縦スクロールさせるサイトのデモです。

• 横スクロールのサンプルは、こちらです。
• 上のメニューや、マウスホイールすると該当ページにスクロールします。
• <a href="#page2" class="pager">と書くことで、 任意のリンクにスクロールエフェクトがかかります。

Page2

スクロールバーについて

• このやり方では、縦スクロールバーが出ます。縦スクロールバーを直接操作されると、変なところでコンテンツを止めることができてしまいます。

Page3

マウスホイールについて

• このサンプルのように、jquery.mousewheel.jsなどを使うことでマウスホイールにも対応できます。
  ただし、このサンプルのように、マウスホイールを横スクロールに割り当てると、縦スクロールできなくなります。

Page4

ハッシュ #page4 について

• スクロールバーを使っているので、ハッシュがそのまま使えます。ためしに、このページをリロードしてみてください。
• アニメーションはしませんが、ブラウザの戻るボタンにも対応しています。