🏃
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>
Discussion