fullPage.jsでセクションやスライドをスキップする方法

はじめに

通常のfullPage.jsの動作では、ユーザーがスクロールすると次のセクションに移動します。しかし、場合によっては、スクロールしたときやリンクやボタンをクリックしたときにセクションをスキップさせたいこともあります。

fullPage.jsは、この目的を達成するためのいくつかのメソッドを提供しています（こちらで実際の動作をご覧ください）。

"moveTo" と "silentMoveTo" メソッド

これらのメソッドの中には、ウェブサイト内の特定のセクションやスライドに移動するのに役立つものがあります：

• moveTo(section,slide) (コードペン例)
  指定したセクションとスライドにページをスクロールします。詳細は公式ドキュメントをご覧ください。

• silentMoveTo(section,slide) (コードペン例)
  前述のものと似ていますが、アニメーションなしでスクロールを実行します。詳細はドキュメントをご覧ください。

コールバックでメソッドを有効化する

これらのメソッドをボタンに設定するか、fullPage.jsのコールバックを使用して任意のタイミングで実行できます。

セクションをスキップするためには、onLeaveコールバックでmoveToメソッドを使用します。

JavaScriptとHTMLコード

以下は、onLeaveコールバックを使用してこれらのメソッドを適用するコード例です：

new fullpage('#fullpage', {
    sectionsColor: ['yellow', 'green', 'purple', 'orange'],

    //イベント
    onLeave: function(origin, destination, direction) {
    	skipPages(origin, destination, direction)
    }
});

function skipPages(origin, destination, direction){
    if(destination.item.classList.contains('skip')){
        if(direction === 'down'){
            destinationIndex = destination.index + 2;
        }else{
            destinationIndex = destination.index;
        }
        console.log(destinationIndex);

        setTimeout(function(){
            fullpage_api.moveTo(destinationIndex);
        });
    }
}

これを機能させるには、スキップしたいセクションにクラス名skipを追加する必要があります。

例：

`<div id="fullpage">
    <div class="section">セクション 1 </div>
    <div class="section skip">セクション 2 </div>
    <div class="section">セクション 3 </div>
</div>

CodePenの例

こちらにコードペンの例があります。

See the Pen fullPage.js - Skip Sections on scroll by Álvaro (@alvarotrigo) on CodePen.