KH-WEBLOG TOP > WEBメモ > JavaScript > scrollify.jsで各セクションごとにスクロールさせる方法:jQuery

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

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

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

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事