LoginSignup
4
1

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-07-20

フルスクリーンで段落ごとに見せていくので定番の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を追加
          }
        }
      }
    });

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

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1