JavaScript
jQuery
fullPage.js

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を追加
          }
        }
      }
    });

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