scrollCue.js

はじめに

JavaScriptでプラグインを制作したのでご紹介します。
1ページスクロールを実装するためのプラグインです。

特徴

配布サイトからファイルをダウンロードします。

ダウンロードしたCSSとJSファイルを読み込みます。 JSファイルは</body>直前に置いてください。

<link rel="stylesheet" href="docSlider.css">

<script src="docSlider.min.js"></script>

<div class="docSlider">
    <section>...</section>
    <section>...</section>
    <section>...</section>
</div>

読み込んだJSファイルのすぐ下に追記してください。
必要に応じて、後述のオプションを指定してください。

<script>docSlider.init();</script>

オプション	型	初期値	備考
speed	int	600	ページの切り替え速度(ミリ秒)
easing	string	"ease"	ページの切り替えアニメーション CSSの「transition-timing-function」に相当。
pager	boolean	true	ページャの有無.
horizontal	boolean	false	水平モード
startSpeed	int	null	外部ページから指定のページに遷移してきた場合のページ切り替え速度(ms) 未設定でページ切り替え速度（speed）と同じ値になる。
scrollReset	boolean	false	ページにスクロールバーが出ている場合、ページを切り替えるとスクロール位置をリセットする
complete	function		コールバック関数、docSliderが初期化されると呼び出される
beforeChange	function		コールバック関数、ページが切り替わる前に呼び出される
afterChange	function		コールバック関数、ページが切り替わった後に呼び出される

// ページ切り替え速度とアニメーションを変更
docSlider.init({
    speed : 500,
    easing : 'ease-in-out'
});

docSlider.jumpPage(2);   // index2のページ（3ページ目に移動）
docSlider.jumpPage('bar');   // #barのページに移動

id名で移動する場合は、各ページにidを指定してください。

<div class="docSlider">
  <section id="foo">...</section>
  <section id="bar">...</section>
  <section id="baz">...</section>
</div>

以下のキー入力でページを移動できます。

ハッシュタグ付きのリンクを指定します。

<a href="index.html#bar">#bar のページに移動</a>

※移動させたいページに予めidを指定しておいてください。

<div class="docSlider">
  <section id="foo">...</section>
  <section id="bar">...</section>
  <section id="baz">...</section>
</div>

ページの中にスクロールするボックスがある場合、クラス名「docSlider-scroll」を付けるとマウスホイールイベントの競合を回避できます。

<div class="docSlider-scroll">
スクロールバーの出ているボックス
</div>

かなり内容を端折りましたが、ざっくりと使い方のまとめでした。
細かい機能やカスタマイズなどの説明はドキュメントページ（英語）をご覧ください。