Edited at

fullpage.jsを使ったページでセクションをスキップさせる

More than 1 year has passed since last update.

フルスクリーンで段落ごとに見せていくので定番のjQueryプラグインのfullpage.js

https://alvarotrigo.com/fullPage/

デフォルトでは対応してないが、

レスポンシブにして、

スマホのときだけセクションを増やしたい、という仕様があり、

PCのときは、セクションを display:noneとか height:0で隠しておいて、

スマホのときだけ表示させる、というのをした。

しかしPCのときは、非表示セクションへ一回移動してしまうので、(スクロールせずナビゲーションだけが進んでしまう)

非表示セクションはスキップさせる必要がある

(ナビゲーションのドットはcssでPCサイズのときのみ

 #fp-nav ul li:nth-child(2) とかで消しておく)


エラーが出てしまいダメだったコード

//セクションの2番目をスキップさせる

$('#fullpage').fullpage({
onLeave: function(index, nextIndex, direction){
if(PCのときだけ){ //なんか分岐判定用の変数とか使ってください
if(index == 1 && direction == "down"){
//セクション1から下に移動するときにセクション2を飛ばしてセクション3に
$.fn.fullpage.moveTo(3);
}
if(index == 3 && direction == "up"){
//セクション3から上に移動するときにセクション2を飛ばしてセクション1に
$.fn.fullpage.moveTo(1);
}
}
}
});

onLeave のとき $.fn.fullpage.moveTo(セクション)

を実行すると、実行タイミングがよろしくないのかエラーが出てしまう、

そこで、実行タイミングを少しズラした


大丈夫だったコード

    $('#fullpage').fullpage({

onLeave: function(index, nextIndex, direction){
if(PCのときだけ){
if(index == 1 && direction == "down"){
setTimeout(function(){$.fn.fullpage.moveTo(3);},10);
//setTimeoutを追加
}
if(index == 3 && direction == "up"){
setTimeout(function(){$.fn.fullpage.moveTo(1);},10);
//setTimeoutを追加
}
}
}
});

これだけでエラーをださずにスキップさせる動作が出来ました