ブログ

紙芝居のように全画面でコンテンツを表示し、スクロールで次のコンテンツまでスクロールさせるjQueryのプラグイン「fullPage.js」を使用した際に、前後のコンテンツ（セクション）へ移動させるアンカーリンクの備忘録です。

[html]
○HTML
<span id="moveUp" class="arrow"></span>
<span id="moveDown" class="arrow"></span>

○JS
//前のセクションへ移動
$(document).on(‘click’, ‘#moveUp’, function(){
fullpage_api.moveSectionUp();
});
//後のセクションへ移動
$(document).on(‘click’, ‘#moveDown’, function(){
fullpage_api.moveSectionDown();
});
[/html]

アンカーリンクのボタンに「moveUp」と「moveDown」のIDを割り当ててください。

合わせて、自動的にスクロールさせるオプションも、よく使用するので備忘録として。

[html]
afterRender: function () {
setInterval(function () {
$.fn.fullpage.moveSectionDown();
}, 5000);//5秒で自動スクロール
}
[/html]