ページのスクロール具合をプログレスバーで表示してくれるjQueryプラグイン「Scrolline.js」

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

ページスクロールの進捗具合を、プログレスバーを用いて表現できるjQueryプラグイン「Scrolline.js」をWordpress上で使ってみました。

ちょっとした記述で、かなり手軽に設置できるプラグインだったので紹介です。

スポンサーリンク
レクタングル(大)広告

Scrolline.jsとは

Scrolline Example Default

Scrolline.jsは、ページの上下左右に手軽にスクロール位置を表示するプログレスバーを表示するためのjQueryプラグインです。

jQueryと、Scrolline.jsスクリプトを呼び出して、短いコードを書くだけで手軽に「ページスクロールの進捗状況を表示するプログレスバー」を設置することができます。

当サイトでも、既にScrolline.jsプラグインを利用して、ページ上部にプログレスバーを表示しています。

公式のデモページは以下になります。

Scrolline.jsの使い方

使い方が簡単なScrolline.jsではありますが、一応Wordpress上での使い方を説明しておきます。

主な手順

基本的にダウンロード&ファイル設置後は、短いコードで実装することができます。

  1. Scrolline.jsのダウンロード
  2. スクリプトファイルの設置
  3. 呼び出し・実行をコードを書く

基本的に、コードを書くところは、コピペ一発でできるかと思います。

以下では、Wordpressの子テーマに実装するものとして説明します。

Scrolline.jsのダウンロード

まずは、anthonyly/Scrolline.jsから、ZIPファイルをダウンロードします。

anthonyly-Scrolline.js · GitHub

スクリプトファイルの設置

ファイルをダウンロードしたら解凍したら、中にある「jquery.scrolline.js」ファイルを取り出して、子テーマ内の以下の場所に設置します。

  • js/jquery.scrolline.js

jsフォルダがない場合は作成してください。

呼び出し・実行をコードを書く

あとは、以下のコードを</body>タグ手前に

子テーマ内の「js/jquery.scrolline.js」を呼び出してあとは、以下の簡単な実行コードを書くだけです。

すると、デフォルトでは、ページ上部に細めのプログレスバーが表示されます。

ページ上部にスクロールが表示

ページを一番下までスクロールすると、プログレスバーが最後まで進捗します。

スクロールが終了するとプログレスバーが最後まで行く

実行コードの利用例

その他の、実行コードの書き方などを以下に紹介しておきます。

例えば、上記のように書くと以下のようにページ下部にプログレスバーが表示されます。

ページ下部にプログレスバーを表示する

以下のように書いたとすると、右側に太めのバーを出すことができます。

右側にプログレスバーを表示

scrollEndオプションを利用することで、スクロールが終了したら、動作する行動を書くためのコードを書くことができます。

スクロールが最後まで行ったらダイアログを表示する

まとめ

このように、Scrolline.jsプラグインを利用すると、手軽に「スクロール状況を表示するプログレスバー」を設置することができます。

ただ、ブラウザにあるスクロールバーは、基本的にスクロール状態を表示するためのプログレスバーみたいなものです。ですのでWordpressサイトで利用したとしても、あまり意味がないと言えばないかもしれません。

ただ、サイト初見の人だと、「おっ!手が込んでるな」くらいには思ってもらえるかもしれません。