Page1

縦スクロールのデモ

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

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

Page2

スクロールバーについて

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

Page3

マウスホイールについて

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

Page4

ハッシュ #page4 について

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