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

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

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

Scrolline.jsとは

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

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

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

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

http://anthonyly.com/jquery.plugins/scrolline/

anthonyly.com

Scrolline.jsの使い方

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

主な手順

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

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

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

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

Scrolline.jsのダウンロード

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

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

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

js/jquery.scrolline.js

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

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

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

<!-- scrolline.jsを読み込む前にjQueryを呼び出す -->
<!-- <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> -->
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.scrolline.js"></script>
<script>
jQuery.scrolline();
</script>

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

jQuery.scrolline();

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

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

実行コードの利用例

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

<script>
jQuery.scrolline({
    reverse : true,         //プログレスバーの進む方向を逆にする
    position : 'bottom',    //バーを表示する位置
    backColor : '#2980b9',  //背面色
    frontColor : '#f1c40f', //前面色
    weight : 12             //プログレスバーの高さ
});
</script>

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

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

<script>
jQuery.scrolline({
    position : 'right',     //バーを右側に表示
    direction : 'vertical', //バーを縦型にする
    weight : 30,            //プログレスバーの幅
    scrollEnd : function() {//最後までスクロールした後の動作
        alert('End of scroll!');
    }
});
</script>