セクションごとにスクロールさせる方法 - scrollfy.jsの使い方【jQuery】

各セクションごとにスクロールさせる為には、jQueryを使用して動作させる必要があります。

そこで簡単に実装が可能なjQueryのプラグイン「scrollfy.js」の使い方について解説します。

sectionのbackgroundをイメージ画像を指定することで画像にすることも可能。

【写真入りセクションごとにスライド】

デモページ

▪実装例-CodePen⇩

See the Pen セクションごとにスクロールさせる.scrollify by pull-design (@design90806871) on CodePen.

scrollfy.jsの公式サイト
CDNでScrollify.jsの読み込み
code記述方法
- HTML
- CSS
- JS
scrollfy.jsのオプション一覧
オプションを使ってアレンジ
- ドット付き：セクションごとにスクロールさせる.scrollify
- Swiperとドット付き：セクションごとにスクロールさせる.scrollify
他の動的プラグイン

scrollfy.jsの公式サイト

下のURLがscrollfy.jsのサイト情報になり、実装はCDNで読み込むかダウンロードする必要があります。

▪公式サイト：https://projects.lukehaas.me/scrollify/#home

▪CDN版：https://cdnjs.com/libraries/scrollify

▪GitHubダウンロード版：https://github.com/lukehaas/Scrollify

CDNでScrollify.jsの読み込み

jquery.min.jsとscrollify.min.jsを</body>の直上に記述して読み込みます。

※jqueryを読み込んで次にscrollifyを読み込む書き方をしないと動作しません。

<!-- jquery.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- scrollify.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.21/jquery.scrollify.min.js"></script>

code記述方法

HTML

sectionを三つ作ると三つのスクロールが可能になります。

<section>
  <p>Section1</p>
</section>
<section>
  <p>Section2</p>
</section>
<section>
  <p>Section3</p>
</section>

CSS

sectionの背景色を指定すると動作がわかりやすいです。

/* 背景色 */
section {
  background: #6495ed;
}
section:nth-child(2) {
  background: #00fa9a;
}
section:nth-child(3) {
  background: #f4a460;
}

JS

指定する対象をsectionでsectionごとにスクロールさせる事ができます。section：”.クラス名”,の記述でクラスの指定も可能です。

$(function() {
	$.scrollify({
		section : "section", //指定する対象
		easing : 'swing', // イージング指定
		scrollSpeed : 300, // スクロールの速度
	});
});

scrollfy.jsのオプション一覧

scrollfy.jsではオプションが用意されていて、$.scrollify({ });の中に記述することで使用可能になります。

オプション	内容
section : “section”,	ページスクロールをさせたいエリアのidやclassを指定。
sectionName : “section_name”,	各セクションに付けるデータ属性の名前の変更。デフォルトは「sectionName」。
interstitialSection : “header”,	ヘッダーやフッターなど1ページスクロールさせずに表示するidやclassを指定。
easing : “swing”,	イージングlinearなど指定可能（https://easings.net/ja）を参照。
offset : 0,	スクロール先の位置を指定。600だと600px下にスクロールされる。
scrollSpeed : 600,	スクロールの速度をミリ秒で設定。
scrollbars : true,	スクロール表示・非表示設定。falseで非表示。
standardScrollElements : “main”,	標準のスクロール動作を必要とするエリアのidかclassを指定。
setHeights : true,	heightをブラウザ全体に表示させるかを設定。デフォルトはtrue。非表示はfalse。
overflowScroll : true,	スクロールさせるかどうかを設定。デフォルトはtrue。falseにすると、はみ出した要素は無視されて次のセクションまでスクロールされる。
updateHash : true,	セクションをスクロールする時にscrollifyがブラウザの#を更新するかどうか指定。デフォルトはtrue。falseにするとURLの末尾に#が付かなくなる。
touchScroll : true,	タッチスクロールを処理するかどうかを設定。デフォルトはtrue。