ページトップへスムーズに移動するスクロールアップ

ホームページ高機能化ツール スクロールアップ
1画面が長いホームページの場合、別のページへ移動したいとき、ユーザーはどうすればいいのでしょうか? ナビゲーションバーは上の方にあるから、スクロールバーをズルズルと操作するか、マウスホイールを回転させるとか。スマホに慣れたユーザーにはこれがめんどうだったりします。こんなとき、ページトップへのボタンが画面下に張り付いて、好きなとき利用できると便利です。デジタルエイドは、こうした機能を持つホームページツールを開発し、スクロールアップ という名称で無料で公開します。

スクロールアップとは

ある程度、ページを読み進めると、画面右下にページトップへ移動するボタンが表れます。このマークはスクロールしても、定位置に固定されたままです。クリックすると、いきなりページトップへ飛ぶのではなく、スマホのようにシュルシュルとページトップへ移動します。
本ページからダウンロードできます。

スクロールアップの特長

スクロールアップのおもな特長は、以下の4点です。

  1. ボタン画像が不要。
  2. ボタンの色は基本6色から選べる。
  3. ブラウザに負荷がかからない。
  4. CC(クリエイティブ コモンズ)ライセンスの 表示 + 継承 で無料配布される。

1. ボタン画像が不要

通常、この種のプログラムはボタンを画像として制作し、設置するのがふつうです。出来合いのボタンが自分のホームページと色味が合わない場合は、自分で作り直さなければなりません。スクロールアップは、ボタンを CSS で描画し、しかも6色用意していますので、ユーザーがわざわざボタンを制作する必要はありません。

2. ボタンの色は基本6色から選べる

赤、オレンジ、黄、緑、青、紫の基本6色から、CSSクラスを指定することで選べます。

ボタン クラス指定
赤

class="red"
オレンジ
オレンジ
class="orange"
黄

class="yellow"
緑

class="green"
青

class="blue"
紫

class="purple"

3. ブラウザに負荷がかからない

じつは似たような機能の持つコードは一般に公開されていて、それをコピペして使われている人も多いようです。
しかし、それらのコードは動きはするものの、ブラウザに余計な負荷がかかり、長く使っているとブラウザの挙動がおかしくなってくる危険性があります。
スクロールアップはプラウザへ負荷がかかりすぎないよう、快適にお使いただけるように工夫しています。

4. CC(クリエイティブ コモンズ)ライセンスの 表示 + 継承 で無料配布される

CCライセンス 表示 + 継承
スクロールアップは、商用/非商用関係なく、無料で、何度でもお使いいただけます。
また、プログラムを改変することもできます。ただし、改変したプログラムを利用または配布する場合は、オリジナルと同様に、CCライセンスの 表示 + 継承 を踏襲しなければなりません。
この場合、表示とは、ホームページ上にプログラムの著作権者を表示するのではなく、scroll-up.css や scroll-up.js の冒頭の著作権表示を消さないで残しておくだけで結構です。

スクロールアップの設置

スクロールアップは、jquery 3.2.1 に準拠して書かれています。よって、jQuery を読む込むことが前提です。

スクロールアップのフォルダとファイルの構成

scroll-upフォルダ
|-scroll-up.js
|-scroll-up.css

scroll-upフォルダと中の2つのファイルの内容はまったく変える必要はありません。

通常の html の場合

通常の html とは、CMS などのプログラムで生成されたものではなく、html と css で制作された html のことです。

  1. 作業をする前に、スクロールアップを設置したい html のバックアップを取っておきます。
  2. html の </head> の直前に scroll-up.css を読み込むリンクを書きます。

    例)
    <link href="scroll-up/scroll-up.css" type="text/css" rel="stylesheet" />
    </head>

  3. </body> の直前に、scroll-btn という id を設置し、色指定をします。

    例)
    <div id="scroll-btn" class="red"></div>
    </body>

  4. さらに、</body> の直前に、jQuery と scroll-up.js を読み込むリンクを書きます。

    例)
    <div id="scroll-btn" class="red"></div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="scroll-up/scroll-up.js" type="text/javascript"></script>
    </body>

  5. テストして意図通りに動けば OK です。
  6. 意図通りにいかない場合は、html 内のパスを確認してください。

なお、複数ページにスクロールアップを設置する場合は、上位の階層に scroll-up フォルダをアップロードし、各 html から css ファイルや js ファイルへ正しくパスを通します。

WordPress に設置する場合

  1. 作業をする前に、必ず 現在のテーマフォルダ内の functions.php のバックアップを取っておきます。
  2. 1と同じ階層に scroll-up フォルダを、FTP でアップロードします。
  3. WordPress の管理画面にログインして、スクロールアップを設置したいページの末尾に scroll-btn という id を設置し、色指定をします。

    <div id="scroll-btn" class="red"></div>

  4. functions.php に css ファイルと js ファイルを読み込むためのコードを書きます。
    以下は、xxxというスラッグのページから呼び出す場合の書き方です。

    例)
    function cb_enqueue() {
    if (is_single ('xxx')) {
    wp_register_style ('scroll_style', get_stylesheet_directory_uri()."/scroll-up/scroll-up.css");
    wp_enqueue_style ('scroll_style');
    wp_register_script ('scroll_script', get_stylesheet_directory_uri()."/scroll-up/scroll-up.js", array('jquery'), false, true);
    wp_enqueue_script ('scroll_script');
    }
    }
    add_action ('wp_enqueue_scripts', 'cb_enqueue');

  5. テストして意図通りに動けば OK です。
  6. 意図通りにいかない場合は、バックアップしていた functions.php に戻し、技術担当者に依頼しましょう。

スクロールアップのダウンロード

下記のダウンロードボタンからスクロールアップが入手できます。
ただし、現段階では日本語パックを利用しているデバイスでのみ有効です。
多言語向けに実装したい方は、ご連絡ください。

なお、スクロールアップは、クリエイティブ コモンズ 表示 + 継承 です。 CCライセンス 表示 + 継承


コメントを残す