自動スクロールに関して

[yarai (yt)]

実現済の内容：
入力画面にスペースを配置し、配置したスペースにボタンを表示しています。
ボタンクリック時に自動的に画面上部にスクロールするようにしています。
//ボタンクリック時の処理
window.scroll({
top: 0,
behavior: “smooth”,
});

お困りの内容と詳細：
最深部（画面一番下）までスクロールし、ボタンクリック時、
画面上部にスクロールしない現象が発生します。
（ヘッダー部分が隠れた状態でスクロールはしない）
※補足
日立ケーシステムズのタブ表示プラグインを導入しています。

上記現象の原因や解決策がお解りの方いらしゃいましたら
ご返事いただけますと幸いです。

よろしくお願いいたします。

[TaroTanaka (田中太郎)]

あらいさん、こんにちは。

こちらでも試してみましたが、問題なく動いておりますので、
正直、「タブ表示プラグイン」が原因な気はしますので、
あまりお力添えできるかは分かりませんが、まずは、原因の調査かと思います。
以下の動作はどうのようになっているでしょうか？
・最深部までスクロールした場合のみ、
画面上部へスクロールしないということであっていますか？
・最深部へスクロールして、ボタン押下時、
ボタンのクリックイベント内には入っているでしょうか？
console.log();等を用いて、試してみると良いと思います。
・「タブ表示プラグイン」を無効化して、試した場合は、
問題なく上部へスクロールされるでしょうか？
こちらの場合は、あまり回答があるか分かりませんが、
日立ケーシステムズにお問い合わせされるのが良いかと思います。

頑張ってください。

[yarai (yt)]

田中太郎さん、はじめまして

ご返事いただきありがとうございます。
田中さんのご指摘通り、タブ表示プラグイン」を無効化して、試した場合、
問題なく上部へスクロールされました。
ですので原因としては、プラグイン側の制御が影響しているかとと思います。
日立ケーシステムズへの問い合わせを検討したいと思います。

ご助言いただきありがとうございます。

[aaa]

おそらく、タブ表示プラグインが

top:0

の指定を阻害してしまうのではないかと想像しました。

scroll_button というスペースが存在する前提です。
回答者側ではプラグインが入った状態を再現できないので
動作確認できません。
適当に gaia-head まで移動するように書いてみました。

(() => {
    'use strict';
    kintone.events.on([
        'app.record.detail.show', 'app.record.create.show', 'app.record.edit.show'
    ], (event) => {

        // 画面上部にある要素を取得
        const upperElement = document.querySelector('.gaia-header');
        console.log(upperElement)

        // ボタンを作成
        let button = document.createElement('button');
        button.id = 'scroll';
        button.innerText = '画面上部へ移動';
        button.onclick = () => {
            // 要素位置を取得してスクロール
            window.scroll({
                top: upperElement.offsetTop,
                behavior: "smooth",
            });
        };


        kintone.app.record.getSpaceElement('scroll_button').appendChild(button);
        return event;
    });
})();