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// functions26// ------------------------------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}

補足情報（FW/ツールのバージョンなど）

以上になります。Scrollifyで用意されているオプションやメソッドを
活用すればうまくいきそうではあるのですが、理解が足りず、あと一歩のところで実現できません。
scrollify自体にはこだわりがなく、どうしてもこれが良いというわけではありません。

大変恐縮ですが、解決策をお知りの方、いらっしゃいましたら
少しでも構いません。解決に近づける助言・ご指導のほどよろしくお願いいたします。