WEBサイトで1ページ毎にスクロールさせたい！
そんなことが、pagePhiling.jsを実装すれば可能になります。
pagePhiling.js←公式HPからプラグインをダウンロード！
デモ←私のポートフォリオですが、pagePhilingを実装しております。ご覧ください！
準備するもの
- html,cssファイル
- javascript基礎知識
- やる気スイッチ
- pagePhiling.jsをダウンロード
実装する
HTML
<!DOCTYPE html><html><head><metacharset="utf-8"><title></title></head><!-- stylesheet --><linkrel="stylesheet"href="css/styles.css"><linkrel="stylesheet"href="pagePiling.js-master/jquery.pagepiling.css"><body><!-- nav要素 --><ulid="nav"><lidata-menuanchor="Page1"class="active"><ahref="#Page1">First section</a></li><lidata-menuanchor="Page2"><ahref="#Page2">Second section</a></li><lidata-menuanchor="Page3"><ahref="#Page3">Third section</a></li><lidata-menuanchor="Page4"><ahref="#Page4">Fourth section</a></li></ul><!-- section毎に内容を記述する --><divid="pagepiling"><divclass="section" id="section1"> section 1</div><divclass="section pp-scrollable"id="section2"> section 2</div><divclass="section"id="section3"> section 3</div><divclass="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を追加する。
後記
いかがでしたでしょうか？工夫次第でおしゃれでいい感じのウェブページが作れるはずです♪ぜひ、実装してみてください！