scrollifyを使用した縦画面でのフィットスクロール実装について

前提

初心者のため、もしかしたら非常に簡単なことかもしれません。
色々と試してみたものの、どうしても実現出来ませんでした。
どなたか解決前提でご教授頂けますと幸いです。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

scrollify（https://projects.lukehaas.me/scrollify/）

　を利用して縦画面の紙芝居のようなスクロールを実現したい

該当の数画面分フィットするが、該当以外の箇所以前・以降は普通にスクロールさせる
さらにページャーも該当部分が表示されている時は画面右中央に固定し、以外の部分では表示させない

参考にしたサイト

現在のコードはこちらを参考にしました。
https://liginc.co.jp/357738

表示参考サイト

細かい動きは別ですが、以下のサイトのようなものが理想です。
https://hr-studio.jp/
→画面中部あたりの「管理がしやすい」「簡単に作成」の箇所

https://liginc.co.jp/
→TechnologyやDesignといった部分

発生している問題

フィットスクロールさせたくない部分（該当箇所の前後コンテンツ）も同じ動きになってしまう
ページャーが該当部分外でも表示されてしまう
全画面フィットスクロールの1画面分がなぜか除外され、それより上の通常コンテンツ部分がフィットスクロールしてしまう
ただし3画面目の下の通常コンテンツはスクロール表示すらできない

該当のソースコード

html
1<header></header>
2<section class="standard">
3	<div class="inner">
4		通常スクロールコンテンツ通常スクロールコンテンツ
5	</div>
6</section>
7<!------ これより上通常スクロール-------->
8
9<!------ ここから全画面フィットスクロール （3画面分）-------->
10<div class="b_pager">
11<section class="b-section js-section" data-section-name="section1" id="section1">
12    <div class="section-content">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
13    </div>
14</section>
15<!-- contents -->
16<section class="b-section js-section" data-section-name="section2" id="section2">
17    <div class="section-content">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
18    </div>
19</section>
20<!-- contents -->
21<section class="b-section js-section" data-section-name="section3" id="section3">
22    <div class="section-content">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
23    </div>
24</section>
25<!-- contents -->
26<ul class="pager" id="js-pager"></ul>
27</div>
28<!------ ここまで全画面フィットスクロール （3画面分）-------->
29
30<!------ これより下通常スクロール-------->
31<section class="standard">
32	<div class="inner">
33		通常スクロールコンテンツ通常スクロールコンテンツ
34	</div>
35</section>
36<section class="standard">
37	<div class="inner">
38		通常スクロールコンテンツ通常スクロールコンテンツ
39	</div>
40</section>
41<footer></footer>
42

js
1var $section = $('.js-section'); // 各スライド
2var $pager = $('#js-pager'); // ページャー枠
3
4// scrollifyのオプション設定
5var option = {
6  section : '.js-section',
7  easing: "swing",
8  scrollSpeed: 600,
9  scrollbars: true,
10  before:function(index) {
11    pagerCurrent(index); // ページャーに対応する順番にクラス名を付与
12  },
13  afterRender:function() {
14    createPager(); // ページャーの作成
15  }
16};
17
18$(function() {
19  $.scrollify(option); // scrollifyの実行
20});
21
22
23
24// ==============================
25// functions
26// ------------------------------
27
28// ページャーに対応する順番にクラス名を付与
29function pagerCurrent(index = 0) {
30  var $li = $pager.find('li');
31  $li.removeClass('is-current');
32  $li.eq(index).addClass('is-current');
33}
34
35// ページャーの作成
36function createPager() {
37  $section.each(function(i, e){
38    // ページ内リンク先の作成
39    var sectionName = $(e).attr('data-section-name');
40    // 最初のliにはクラスを付与
41    var addClass = '';
42    if (i === 0) {
43        addClass = 'is-current';
44    }
45    // liのHTML作成
46    var html = '';
47    html += '<li class="' + addClass + '">';
48    html += '<a href="#' + sectionName + '"></a>';
49    html += '</li>';
50    $pager.append(html);
51  });
52  
53  pagerLink();
54}
55
56// ページャーでaタグをクリックされたらスクロールする
57function pagerLink () {
58  $pager.find('a').on('click', function() {
59    $.scrollify.move($(this).attr("href"));
60  });
61}