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

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

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


利用するイベント

各画面の表示イベント
	詳しくは、利用可能な画面、イベントの一覧をご確認ください。

カスタマイズコード
JavaScript
カスタマイズコードCopied!
(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
動作の確認手順

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

関連ページ
