fullPage.jsで画面遷移をコントロールするためのメモ

#fullPage.jsとは。
縦長1ページのサイトで、フルスクリーン表示のスライドをスクロールで切り替えるように表示できるjQueryプラグイン。
公式サンプルサイト
GitHub

スクロールでスライドがいい感じに切り替わるが、画面内の要素（[次のスライドへ]ボタンなど）を使って遷移させたい場面もあるので、その場合のメモ。

#アンカーリンクを使って画面遷移。
アンカーリンクを使って、ページ内遷移っぽい動きをさせる方法。
「戻る」ボタンを押した場合に、画面遷移のヒストリーを追って、1つ前のスライドに戻れる。

• まずはfullPage.jsのオプションを使って、各スライドにアンカーを設定

sample.html

<script type="text/javascript">
 $(document).ready(function() {
  $('#fullpage').fullpage({
   anchors: ['1stPage', '2ndPage', '3rdPage', 'lastPage'],
  });
 });
</script>

→これで、スクロールで遷移した場合も「URL/#2ndPage」のようにページ内遷移する。（スクロールで遷移した場合も、「戻る」ボタンで前のスライドに遷移する。）

• あとは<a>タグを使ってアンカーへのリンクを貼れば、画面がスルスルとスクロール遷移。

sample.html

<a href="#2ndPage">リンク</a>

これで問題なさそうだけど、「戻る」ボタンで前のスライドに戻る動きが「ウザい」と感じる場面もある。
特にfullPage.jsを使うような縦長1ページのサイトは、何かのランディングページとして使うことも多く、2〜3ページならまだしも、5ページ以上のページで1ページづつ戻られるとちょっとめんどくさいと思われるかも。。

そういうときには以下の方法。
#アンカーを使わずに画面遷移

まずanchors: ['1stPage', '2ndPage', '3rdPage', 'lastPage']のようなアンカー設定は削除。
→この設定が残っていると、スクロールした時点でurlにアンカー名が付与されてしまう。（戻るボタンで戻るとヒストリーを辿ってしまう。）
設定を消すことで、スクロールで遷移した場合もURLは変わらずに遷移する。

続いて、ページ内のリンクボタンとして機能させたい場所にidを付与。

sample.html

<div id="button">リンク</div>

あとはリンクのクリック時に、fullPage.jsのイベントを叩く以下の処理。

sample.html

<script type="text/javascript">
 $(document).ready(function() {
  $("#button").click(function () {
   $.fn.fullpage.moveTo(2);
  });
 });
</script>

$.fn.fullpage.moveTo(2)は、2ページ目への遷移を意味する。
スライド内に、横スクロールのサブスライドを入れ込んでいる場合は、$.fn.fullpage.moveTo(2, 2)のように指定すると、任意のサブスライドへ遷移させることもできる。

---

以上、fullPage.jsを使った場合の画面遷移のコントロール方法でした。
「画面をスクロールさせる」という動きをユーザーに促すのは意外と大変で、あまりリテラシーが高くないユーザーを対象とするページには、「次のページへ」のボタンがある方が親切。
その時、「戻る」ボタンでどう動いて欲しいかによって使い分けると良さそう。