Scroll to top when opening iFrame

Ask the community
1

I am embedding a Softr grid (cards) onto a website using the normal Embed Block provided by Softr. This works well. An action button then needs to open another URL (a third-party URL), preferably in a modal rather than a new tab or same tab.
If the visitor scrolls down the page to a displayed card and then clicks the action button to open the URL in a modal, the content in that model is way back up the top of the modal. The visitors needs to scroll back up to the top of the model to see the content.
I have researched many sites and posts to try and scroll to top automatically after the model opens. But am failing.
In the embedded page (the card view), I have inserted the following into the ‘Code Inside Footer’…

<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Replace 'openModalButton' with the actual ID found in DevTools
        let modalButton = document.getElementById("openModalButton"); 
        
        if (modalButton) {
            modalButton.addEventListener("click", function () {
                openModal();
            });
        }
    });

    function openModal() {
        let modal = document.getElementById("myModal");
        if (modal) {
            modal.style.display = "block";
            modal.scrollTop = 0; // Ensure modal scrolls to top
        }

        // Scroll the Softr page to the top
        window.scrollTo(0, 0);

        // If Softr is inside another iframe, scroll the parent iframe too
        if (window.parent !== window) {
            window.parent.scrollTo(0, 0);
        }

        // Scroll the iframe inside the modal to the top
        let iframe = document.getElementById("myIframe");
        if (iframe) {
            iframe.onload = function () {
                iframe.contentWindow.scrollTo(0, 0);
            };
        }
    }

    function closeModal() {
        let modal = document.getElementById("myModal");
        if (modal) {
            modal.style.display = "none";
        }
    }
</script>

But I do not understand how to retrieve the ID of the open modal button being clicked to open the third-party URL in the modal.

Will this script above do what I need? Will it ensure automatic scroll to the top of the content in the modal?

(I understand using iframes is problematic. The content appears perfectly well on the softr published page. But I do need to embed these grids/card view on a separate web page).

2

Hoping someone might be able to guide me with this code?
Below is the problem I am facing. The Soft card view is embedded on this web page (not ideal, but it’s for a reason). The model opens a third-party URL, but because it is being opened within an iFrame, the display is problematic.
Anyone have any ideas? How do I find the “openModalButton” ID and “myModal” ID to insert into the code?
Mar-26-2025 14-33-46

3

This is actually a pretty significant problem in Softr apps as well.

When the modal opens from a button that’s inside a column container block or other modal, then the modal opens relative to the container block/ other modal instead of the full website view.

This creates the same issue you’re having with alignment, and even worse the issue compounds as even scrolling the website becomes frozen when there’s a modal open somewhere.