I am attempting to add a return to “top” button/function for a side-scrolling page, but it isn’t reappearing as usual. Is this possible to do?

First off, I did find a similar question, but it didn’t help with what I am trying to do. I am attempting to add a return to “top” button on a page that is a side-scrolling page. The axis are just inverted, so I would assume it would still function the same as a normal return to top button, as it is essentially scrolling the same axis. The button displays properly until I set display: none. After that, I have been unable to make it reappear after scrolling the page. Currently have it set to display > 30. I have included the html, css, and js below that I have tried thus far.

HTML and js (located inside body)

<button onclick="returnToStartFunction()" id="toStart" title="Return to Start">&#8656;</button>

<script>
    let startButton = document.getElementById("toStart");

    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) {
            startButton.style.display = "block";
        } else {
            startButton.style.display = "none";
        }
    }

    function returnToStartFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>

CSS

/*
Start styling for return to start arrow.
*/

#toStart {
    display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 0.5rem;
    font-size: 65px;
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.25);
    backdrop-filter: blur(5px);
    border: none;
    border-radius: 8px 0 0 8px;
    outline: none;
    z-index: 999;
}

#toStart:hover {
    background-color: rgba(30,101,49);
}

/*
End styling for return to start arrow.
*/