Railsで特定のページでのみscrollify.jsを使う方法

scrollify.jsとRailsの相性がよくない問題

セクションごとにスムーズスクロールしてくれるプラグインであるscrollify.jsですが、Rails(turbolinks)との相性が悪く、思った通りに動いてくれません。

というのも、普通スムーズスクロールを設定したいページは、トップページとか特定のページだけですよね。そのページでだけscrollifyを動かそうと、そのビューのscriptタグ内で初期化しても、turbolinksの影響なのかすべてのページでスクロールが制御されてしまいます。

解決法

turbolinksがオン、セクションのクラス名がboxであることが前提です。

JavaScript

  $(document).on('turbolinks:load', function() {

    if ($(".box").length) { // そのページにboxクラスの要素が存在するならscrollifyを有効にする
      $.scrollify.enable();
      $.scrollify({
        section: ".box",
        // 各設定
      });

    } else { // 存在しないなら無効化する
      $.scrollify.disable();
    }

  });