#WEBサイトで1ページ毎にスクロールさせたい！
そんなことが、pagePhiling.jsを実装すれば可能になります。
pagePhiling.js←公式HPからプラグインをダウンロード！
デモ←私のポートフォリオですが、pagePhilingを実装しております。ご覧ください！

##準備するもの

html,cssファイル
javascript基礎知識
やる気スイッチ
pagePhiling.jsをダウンロード

##実装する

###HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
   <title></title>
  </head>
<!-- stylesheet -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="pagePiling.js-master/jquery.pagepiling.css">
<body>

<!-- nav要素  -->
<ul id="nav">
    <li data-menuanchor="Page1" class="active"><a href="#Page1">First section</a></li>
    <li data-menuanchor="Page2"><a href="#Page2">Second section</a></li>
    <li data-menuanchor="Page3"><a href="#Page3">Third section</a></li>
    <li data-menuanchor="Page4"><a href="#Page4">Fourth section</a></li>
</ul>



<!-- section毎に内容を記述する　-->
<div id="pagepiling">
	<div class="section"　id="section1"> section 1</div>
	<div class="section　pp-scrollable" id="section2"> section 2</div>
	<div class="section" id="section3"> section 3</div>
	<div class="section" id="section4"> section 4</div>
</div>
      <!-- javascript -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="pagePiling.js-master/jquery.pagepiling.min.js"></script>

</body>

</html>

htmlファイル内に、cssファイルであるjquery.pagepiling.cssとjsファイルであるjquery.pagepiling.min.jsを記述しておく。ajaxのsrcもお忘れなく！
親divのpagePhiling内の各section内に内容を記述する。記述が長い場合は、classでpp-scrollableと記述すればOK!

###js

<script>
      $(function() {
  $('#pagepiling').pagepiling({
      menu: '#nav',
      sectionSelector: '.section',
      sectionsColor: ['#fff', '#eee', '#ddd', '#ccc'],
      anchors: ['page1', 'page2', 'page3', 'page4'],
      navigation: {
          'textColor': '#000',
          'bulletsColor': '#000',
          'position': 'right',
          'tooltips': ['page1', 'page2', 'page3', 'page4']
      },
  });
});
      </script>

jsは上記の記述で機能します。ちなみに、navigationは、ページの右側にスクロールした際の案内が表示されます。

###css
問題はスタイルです。nav要素のスタイルや各sectionのz-indexなどをお好みのスタイルに調整すればいい感じになるはずです。
###追記
スクロールするページを増やしたい時は、htmlファイル上でdivのsection要素と、jsのanchorsとtooltipsのpageを追加する。
##後記
いかがでしたでしょうか？工夫次第でおしゃれでいい感じのウェブページが作れるはずです♪ぜひ、実装してみてください！