JS

HTMLの書き方

head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/6-1.css">

body内にHTMLを記載します。

<header id="header">
	<h1>Header</h1>
</header>

<main>
	<section id="box1" class="box" data-section-name="Area1"><!--data-section-nameはページネーションを表示させた際、現在地に現れるテキスト-->
		<h2>Area1</h2>
	<!--/box--></section>
	<section id="box2" class="box" data-section-name="Area2">
		<h2>Area2</h2>
	<!--/box--></section>
	<section id="box3" class="box" data-section-name="Area3">
		<h2>Area3</h2>
	<!--/box--></section>
</main>

<footer id="footer">
	<small>&copy; Copyright </small> 
</footer>

body 終了タグ直前に jQuery、scrollify.jsと、動きを制御する自作のJS の3 つを読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.21/jquery.scrollify.min.js"></script>
<!--自作のJS-->
<script src="js/6-1.js"></script>

CSSの書き方

CSSを設定しなくても1ページスクロールは動きます。
下記のCSSはscrollfy.jsのページナビゲーションを使用する際に追記するCSSです。

/*========= ページネーションCSS ===============*/

.pagination {
	position:fixed;
	right:20px;
	top: 50%;
	transform: translateY(-50%);
	font-size:1em;
	z-index: 10;
	list-style: none;
}

.pagination a {
	display:block;
	height:20px;
	margin-bottom:5px;
	color:#fff;
	position:relative;
	padding:4px;
}

.pagination a.active:after {
	box-shadow:inset 0 0 0 5px;
}

/*現在地表示のテキストの設定*/
.pagination a .hover-text {
	position:absolute;
	right:15px;
	top:0;
	opacity:0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	padding-right: 15px;
}

.pagination a:hover .hover-text {
	opacity: 1;
}

.pagination a:after {
	-webkit-transition:box-shadow 0.5s ease;
	transition:box-shadow 0.5s ease;
	width:10px;
	height:10px;
	display: block;
	border:1px solid;
	border-radius:50%;
	content:"";
	position: absolute;
	margin:auto;
	top:0;
	right:3px;
	bottom:0;
}

/*768px以下は現在地表示のテキストを非表示*/
@media screen and (max-width:768px) { 
	.pagination a .hover-text{
		display: none;
	}	
}

JSの書き方

$.scrollify({
	section : ".box",//1ページスクロールさせたいエリアクラス名
	scrollbars:"false",//スクロールバー表示・非表示設定
	interstitialSection : "#header,#footer",//ヘッダーフッターを認識し、1ページスクロールさせず表示されるように設定
	easing: "swing", // 他にもlinearやeaseOutExpoといったjQueryのeasing指定可能
	scrollSpeed: 300, // スクロール時の速度

	//以下、ページネーション設定
	before:function(i,panels) {
		var ref = panels[i].attr("data-section-name");
		$(".pagination .active").removeClass("active");
		$(".pagination").find("a[href=\"#" + ref + "\"]").addClass("active");
	},
	afterRender:function() {
		var pagination = "
";
		var activeClass = "";
		$(".box").each(function(i) {//1ページスクロールさせたいエリアクラス名を指定
			activeClass = "";
			if(i===$.scrollify.currentIndex()) {
				activeClass = "active";
			}
			pagination += "
" + $(this).attr("data-section-name").charAt(0).toUpperCase() + $(this).attr("data-section-name").slice(1) + "
";
		});
		pagination += "
";

		$("#box1").append(pagination);//はじめのエリアにページネーションを表示
		$(".pagination a").on("click",$.scrollify.move);
	}

});