申請画面にTopへ戻るボタンを追加する

JavaScript API を利用し、Topへ戻るボタンを追加します。
項目や明細の多い画面では、画面の上部に直ぐに戻れるようになります。

サンプルについて

本サンプルのソースコードについてや、カスタマイズ方法等の技術的なお問合せは承っておりません。

動作イメージ

利用するイベント

• 各画面の表示イベント

カスタマイズコード

JavaScript

(function () {

    'use strict';

    // 画面表示イベント
    const showEvents = [
        'request.input.show', 'request.detail.show', 
        'request.confirm.show', 'request.judgement.show'];

    collaboflow.events.on(showEvents, (event) => {

        const ANCHOR_ID = 'page-top';

        // Topに戻るボタンを追加
        addBackToTopButton(ANCHOR_ID);

        //トップに戻るスクロール処理を関連づける
        addScrollListener(ANCHOR_ID);
    });

    /**
     * Topに戻るボタンを追加します。
     *
     * @param anchorID
     */
    function addBackToTopButton(anchorID) {

        // 存在する場合は、処理しない
        if (document.getElementById(anchorID)) { 
            return;
        }

        // topへ戻る用のアンカー要素を生成
        const backToTop = document.createElement('a');
        backToTop.setAttribute('id', anchorID);
        backToTop.setAttribute('href',  '#');
        backToTop.innerHTML = 'Topへ';

        // アンカーを追加する
        document.body.appendChild(backToTop);
    }

    /**
     * Topに戻るボタンクリック時のスクロール処理を関連づけます。
     *
     * @param anchorID
     */
    function addScrollListener(anchorID) {

        // 指定のアンカー要素がなければ処理しない
        const anchor = document.getElementById(anchorID);
        if (!anchor) { 
            return;
        }

        anchor.addEventListener('click',  (event) => {

            event.preventDefault();

            document.body.scrollIntoView({
                behavior: 'smooth'
            });

        }, false);
    }

})();

css

#page-top {
  background-color: rgb(116, 198, 215);
  color: rgb(255, 255, 255);
  border-radius: 50%;
  bottom: 15px;
  right: 20px;
  font-size: 12px;
  height: 60px;
  width: 60px;
  line-height: 60px;
  outline: 0px;
  text-align: center;
  text-decoration: none;
  position: fixed;
  opacity: 0.8;
}

動作の確認手順

1. アプリ設定＞フォーム設定から新規に通常フォームを作成します。
2. サンプルフォームに、先で記載されている必要項目を配置します。
3. サンプルフォームを再度表示し、カスタマイズのタブを表示します。
4. サンプルのJavaScriptカスタマイズコードをjsファイルに保存します。
5. サンプルのcssカスタマイズコードをcssファイルに保存します。
6. 保存したファイルをアップロードします。
7. アプリ設定＞経路設定から、先のフォームを利用した経路を作成します。
8. 新規文書から作成した経路名をクリックします。
9. 申請画面が表示されます。
10. 右下に「Topへ」ボタンが表示されます。