フルスクリーンで段落ごとに見せていくので定番の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を追加
}
}
}
});
これだけでエラーをださずにスキップさせる動作が出来ました