画面ごとにスクロールができるjQueryのプラグイン「jQuery Scrollify」

公開日：2014/10/07

jQuery Scrollify スクロールプラグイン

画面ごとにスクロールができるjQueryのプラグイン「jQuery Scrollify」

今回はjQueryのプラグイン「jQuery Scrollify」をご紹介します。

「jQuery Scrollify」はWEBサイトのページをスクロールした際に、画面ごとにちょうどいい位置までスクロールさせることができるプラグインです。

セクションごとに画面が分かれているページなどに活用できます。
また、スマホにも対応しております。

下記に「jQuery Scrollify」の設置方法を記載します。

「jQuery Scrollify」の設置方法

下記のページから「jQuery Scrollify」をダウンロードします。

jQuery Scrollify

ファイル読込

jQuery、jQuery Easing Plugin、ダウンロードしたファイルを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.easing.1.3.js"></script>
<script type="text/javascript" src="./jquery.scrollify.js"></script>

HTML

セクションごとに表示する内容を記述します。
下記はsectionタグごとに画面を分けています。
classでpanelを指定しています。

<body>
	<section class="panel sample" data-section-name="sample">
	表示する内容
	</section>
	<section class="panel sample1" data-section-name="sample1">
	表示する内容
	</section>
	<section class="panel sample2" data-section-name="sample2">
	表示する内容
	</section>
	<section class="panel sample3" data-section-name="sample3">
	表示する内容
	</section>
	<section class="panel sample4" data-section-name="sample4">
	表示する内容
	</section>
	<section class="panel sample5" data-section-name="sample5">
	表示する内容
	</section>
</body>

<body>

表示する内容

</section>

表示する内容

</section>

表示する内容

</section>

表示する内容

</section>

表示する内容

</section>

表示する内容

</section>

</body>

CSS

画面の色などをそれぞれ変更したい場合はスタイルを指定します。

<style type="text/css">
.sample {
	background-color: #FFFFFF;
}
.sample1 {
	background-color: #30BFFA;
}
.sample2 {
	background-color: #8CDE16;
}
.sample3 {
	background-color: #FFE508;
}
.sample4 {
	background-color: #FF7995;
}
.sample5 {
	background-color: #AC5FE1;
}
</style>

.sample {

background-color: #FFFFFF;

}

.sample1 {

background-color: #30BFFA;

}

.sample2 {

background-color: #8CDE16;

}

.sample3 {

background-color: #FFE508;

}

.sample4 {

background-color: #FF7995;

}

.sample5 {

background-color: #AC5FE1;

}

</style>

JS

表示している画面の高さを取得し、高さを指定しています。

<script type="text/javascript">
$(function() {
	$(".panel").css({"height":$(window).height()});
	$.scrollify({
		section:".panel"
	});
});
</script>

$(function() {

$(".panel").css({"height":$(window).height()});

$.scrollify({

section:".panel"

});

</script>

また、セクションごとに高さを指定している場合は下記の記述でも可能です。

<script type="text/javascript">
$(function() {
	$.scrollify({
		section:"section"
	});
});
</script>

<style type="text/css">
section {
	height: 800px;
}
</style>