How to Add a Scroll to Top Button in WordPress Gutenberg Editor?

// Add a Scroll to Top Button in WordPress Gutenberg Editor
// Add button HTML and styles to admin head
function add_scroll_button_styles() {
    // Only on post editor screens
    global $pagenow;
    if (!in_array($pagenow, ['post.php', 'post-new.php'])) {
        return;
    }
    ?>
    <style>
        body.block-editor-page .editor-scroll-to-top {
            position: sticky !important;
            bottom: 30px !important;
            right: 30px !important;
            float: right;
            margin-top: -20px; /* Adjust this value if needed */
            z-index: 99999999;
            width: 40px;
            height: 40px;
            background: #2a2a2a;
            border-radius: 4px;
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            border: none;
            padding: 0;
            transform: translateY(-100%);
        }

        body.block-editor-page .editor-scroll-to-top .dashicons {
            color: white;
            font-size: 24px;
            width: 24px;
            height: 24px;
        }

        body.block-editor-page .editor-scroll-to-top:hover {
            background: #444;
        }

        .scroll-button-wrapper {
            position: sticky !important;
            bottom: 0 !important;
            right: 0 !important;
            height: 0;
            width: 100%;
            pointer-events: none;
        }

        .scroll-button-wrapper .editor-scroll-to-top {
            pointer-events: all;
        }
    </style>
    <?php
}
add_action('admin_head', 'add_scroll_button_styles');

// Add button HTML and JavaScript
function add_scroll_button_script() {
    global $pagenow;
    if (!in_array($pagenow, ['post.php', 'post-new.php'])) {
        return;
    }
    ?>
    <script>
    window.addEventListener('load', function() {
        setTimeout(function() {
            const editor = document.querySelector('.interface-interface-skeleton__content');
            if (!editor) return;

            // Create wrapper div for proper positioning
            const wrapper = document.createElement('div');
            wrapper.className = 'scroll-button-wrapper';
            
            // Create the button
            const button = document.createElement('div');
            button.className = 'editor-scroll-to-top';
            button.innerHTML = '<span class="dashicons dashicons-arrow-up-alt2"></span>';
            
            // Add button to wrapper
            wrapper.appendChild(button);
            
            // Add wrapper to editor
            editor.appendChild(wrapper);

            // Show/hide button based on scroll position
            function toggleButton() {
                if (editor.scrollTop > 300) {
                    button.style.display = 'flex';
                } else {
                    button.style.display = 'none';
                }
            }

            // Initial check
            toggleButton();

            // Add scroll listener
            editor.addEventListener('scroll', toggleButton);

            // Scroll to top when clicked
            button.addEventListener('click', function() {
                editor.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        }, 1000);
    });
    </script>
    <?php
}
add_action('admin_footer', 'add_scroll_button_script');