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

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

スクロールアップとは

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

▼ スロールアップ ダウンロード ▼

スクロールアップの特長

スクロールアップのおもな特長は、以下の3点です。
  1. ボタン画像が不要。
  2. ボタンの色は基本 6 色から選べる。
  3. ブラウザに負荷がかからない。

1. ボタン画像が不要

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

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

赤、オレンジ、黄、緑、青、紫の基本 6 色から、CSS クラスを指定することで選べます。CSS クラスを指定しない場合は、黒になります。
ボタン クラス指定
赤

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

class="yellow"
緑

class="green"
青

class="blue"
紫

class="purple"
黒

クラス指定なし

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

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

スクロールアップの設定設置

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

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

scroll_upフォルダ
|-jquery.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> の直前に、id="scroll_btn" という div 要素を設定し、色指定をします。
    例) <div id="scroll_btn" class="色"></div>
    </body>
  4. さらに、</body> の直前に、jQuery と jquery.scroll_up.js を読み込むリンクを書きます。
    例)
    <div id="scroll_btn" class="色"></div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="scroll_up/jquery.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 の管理画面にログインして、スクロールアップを設定したいページの末尾に id="scroll_btn" という div 要素を設定し、色指定をします。
    <div id="scroll_btn" class="色"></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/jquery.scroll_up.js", array('jquery'), false, true);
    wp_enqueue_script ('scroll_script');
    }
    }
    add_action ('wp_enqueue_scripts', 'cb_enqueue');
  5. テストして意図通りに動けば OK です。
  6. 意図通りにいかない場合は、バックアップしていた functions.php に戻し、技術担当者に設定設置を依頼しましょう。

スクロールアップの撤去

  1. 設定の際、上記コードを書き込んだファイルから設定コードをすべて削除します。
    ・jquery へのリンク
    ・scroll_up.css へのリンク
    ・jquery.scroll_up.js へのリンク
    ・id="scroll_btn" の div 設定
    <div id="scroll_btn" class="色"></div>
  2. アップロードした scroll_up フォルダをすべて削除します。

スクロールアップの使用条件

スクロールアップは、CC(クリエイティブ コモンズ)ライセンスの 表示 + 継承 です。
  1. 商用/非商用関係なく、許可なく、お使いいただけます。
  2. 使用許可を取る必要はありません。
  3. プログラムの改変は自由ですが、改変したプログラムは、本プログラムと同様、CC(クリエイティブ コモンズ)ライセンスの 表示 + 継承 で公開しなければなりません。
  4. jquery.scroll_up.js と scroll_up.css 冒頭の弊社のクレジットは消さないでください。

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

下記のダウンロードボタンからスクロールアップが入手できます。
ただし、現段階では日本語パックを利用しているデバイスでのみ有効です。
多言語向けに実装したい方は、本ページのコメント欄を使ってご連絡ください。 なお、スクロールアップは、クリエイティブ コモンズ 表示 + 継承 です。 CCライセンス 表示 + 継承

コメントを残す