jScrollの導入方法と使い方をご紹介!

jScrollの導入方法と使い方をサンプルコード付きでご紹介します。jScrollを用いると無限スクロールできるようになり、ユーザーに大量の情報を簡単に共有させることができるようになります。ではその内容を見ていきましょう。

コンテンツ [表示]

  1. 1jScrollとは?
  2. 2jScrollの導入方法
  3. 2.1ダウンロードする方法
  4. 2.2CDNを用いる場合
  5. 3jScrollの使い方
  6. 4まとめ

jScrollとは?

jScrollを用いると無限スクロールできるようになり、ユーザーに大量の情報を簡単に共有させることができるようになります。

jScrollによってページ遷移することなくスクロールのみで実現するため、特にスマートフォンやタブレットなどの利用にも適しています。

Photo byStockSnap

jScrollの導入方法

jScrollの導入方法としてはダウンロードする方法とCDNを読み込む方法の2パターンあります。

ダウンロードする方法

まず以下のサイトでダウンロードしてください。

jscroll
jscroll

次にダウンロードしたファイルから「jquery.jscroll.min.js」とjQueryを読み込むと、jScrollの実装は完了です。

この時必ずjQueryのCDNの方を先に読み込んでください。

CDNを用いる場合

jScrollのCDNは以下になります。

jScrollのCDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.4.1/jquery.jscroll.min.js"></script>

こちらをjQueryを読み込んだ後に、読み込んでいただくと導入は完了です。

jScrollの使い方

ではjScrollの使い方について解説します。

HTMLで無限スクロールさせたい部分をdiv要素などで囲んで、適当なclassを付けてください。

またページごとにコードを分割して記述したい場合はその都度ファイルを分けてください。

そして最後a要素に無限スクロールされるようにhref属性に記述します。

ではサンプルコードを用意したので確認してみましょう。

このように無限スクロールできていることが分かります。

JSには

jScroll

$('無限スクロールさせたいコンテンツを囲むクラス名').jscroll();    

と記述することでjScrollが使えます。

またjScrollには多くのオプションが存在します。

オプションの詳細については以下の記事にて解説しているので参照してください。

あわせて読みたい
jScrollのオプション一覧と使い方をご紹介!のイメージ
jScrollのオプション一覧と使い方をご紹介!
jScrollのオプション一覧と使い方をサンプルコード付きでご紹介します。jScrollにはいくつかのオプションが存在します。その中でも特によく用いるものをピックアップして取り上げます。

まとめ

いかがでしたでしょうか?

jScrollを用いることで、エンゲージメントを向上させたり、モバイル端末に最適であったりします。

ぜひここで紹介した方法を用いてjScrollを使ってみてください。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

西村卓也
ライター

西村卓也

HTML/CSS/JSに関する記事を執筆しています。よろしくお願いします。