php 20180514 pullPage.jsでセクション内をスクロールさせる

Posted 2021-05-04

if (window.matchMedia( '(min-width: 1024px)' ).matches) {
	$(document).ready(function() {
		$('#contents').fullpage({
			anchors:['section01', 'section02', 'section03', 'section04', 'section05', 'section06', 'section07', 'section08', 'section09', 'section10'],
			menu: '#nav',
			navigation: true,
			navigationPosition: 'left',
			slidesNavigation: true,
			slidesNavPosition: 'bottom',
			scrollingSpeed: 1000,
			scrollBar: true,
			fitToSection: true,
			easing: 'easeInOutCubic',
			easingcss3: 'ease',
			continuousVertical: true,
			normalScrollElements: '#scroll',
			scrollOverflow: true,
			touchSensitivity: 10,
			normalScrollElementTouchThreshold: 10,
			keyboardScrolling: true,
			animateAnchor: true,
			recordHistory: true,
			controlArrows: true,
			verticalCentered: true,
			resize : true,
			paddingTop: 0,
			paddingBottom: 0,
			fixedElements: null,
			responsive: 0,
			sectionSelector: '.section',
			//▼こいつがスクロールを可能にしている
			scrollOverflow: true
		});
	});
}

//サンプル(平野屋も参考になる)
//https://alvarotrigo.com/fullPage/examples/scrolling.html#firstPage
//別のプラグインもあるけど
//https://projects.lukehaas.me/scrollify/#home
//実装先(footer回りで実装)
//http://west02.ab-ss.com/hotelorientalexpress.com/html/osakashinsaibashi/lang/

//jquery.easings.min.jsは使っているか不明、scrolloverflow.min.jsでセクション内スクロール
<script src="<?php echo LOCATION_MODULE;?>js/jquery.easings.min.js"></script>
<script src="<?php echo LOCATION_MODULE;?>js/jquery.fullpage.min.js"></script>
<script src="<?php echo LOCATION_MODULE;?>js/scrolloverflow.min.js"></script>

//多分id="contents"で括るのよろしくなさそう、id="fullPage"とかがよさそう
<div id="contents">
  <div class="con_main section" data-anchor="section01"></div>
  <div class="con_cocept section" data-anchor="section02"></div>
  <div class="con_location section" data-anchor="section03"></div>
  <div class="con_guide section" data-anchor="section04"></div>
</div>