scrollify.jsで各セクションごとにスクロールさせる方法：jQuery

2022-07-21 JavaScript

TAGjQuery

デモのように各セクションごとにスクロールさせる方法をご紹介します。

DEMO

1 scrollify.jsの読み込み
2 scrollify.jsの実装
3 scrollify.jsのオプション

scrollify.jsの読み込み

scrollify.jsはjQueryのプラグインですので、
まずはjQueryとscrollify.jsを読み込みます。

・公式サイト
・CDN

公式サイトからダウンロードして使用するか、CDNを使用し

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-scrollify@1/jquery.scrollify.min.js"></script>

header等に読み込みます。

scrollify.jsの実装

以下実装方法をご紹介します。

次のようなHTMLに対して実装する場合

<div class="scbox">
<p>section1</p>
</div>
<div class="scbox">
<p>section2</p>
</div>
<div class="scbox">
<p>section3</p>
</div>

一番単純な方法は

$(function() {
    $.scrollify({
        section : ".scbox",
    });
});

こちらでOK

次に、設定できるオプションをご紹介します。

scrollify.jsのオプション

scrollify.jsに指定できるオプションは下記です。

section	指定する対象クラス名
sectionName	各セクションのハッシュ値を定義
interstitialSection	ヘッダーやフッターなど、フルハイト以外のセクション用のCSSセレクター。
easing	イージング方法
offset	各セクション位置のオフセット
scrollbars	スクロールバーを表示するかどうか。
standardScrollElements	標準のスクロール動作を必要とする要素のクラス名。
setHeights	セクションに高さを割り当てるかどうかを定義デフォルトではTrue。
overflowScroll	セクション内のオーバーフローしたコンテンツをスクロールできるかどうかを定義するブール値。デフォルトではTrue。
updateHash	スクロール時アドレスバーのURLを更新するかどうか。デフォルトではTrue。
touchScroll	タッチスクロールイベントを処理するかどうかを定義する。デフォルトではTrue。
before	セクションがmoveメソッドを介してスクロールされる前に発生するコールバック。引数には、セクションのインデックスとすべてのセクション要素の配列が含まれます。
after	新しいセクションがスクロールされた後に発生するコールバック。引数には、セクションのインデックスとすべてのセクション要素の配列が含まれます。
afterResize	ウィンドウのサイズが変更された後に発生するコールバック。
afterRender	Scrollifyの初期化後に発生するコールバック。

ほとんど使用する機会はなさそうですが、よく使う設定としては

$(function() {
$.scrollify({
  section:'.scbox', //対象クラス名
  easing: 'swing', // イージング
  scrollSpeed: 600, // スクロール時の速度
  updateHash: false, // スクロール時アドレスバーのURLを更新
  standardScrollElements: '.scbox2,.scbox3', //通常スクロールをする要素
});
});

辺りかと思います。

updateHashはfalseにしていないとURLにハッシュが付いてしまいますのでURLを統一したい場合には必要です。

standardScrollElementsは長いボックス等で通常スクロールにしないとカクカクした動きになってしまう場合に、その要素だけデフォルトのスクロールにする際に必要です。