Adding this feature is good UX and quite easy to do in Elementor.

On this website we have a template for the Header and Footer. In the Header template we added a container at the very top with the HTML widget where the Javascript code below has been placed.

<script>
document.addEventListener('DOMContentLoaded', function() {
    const offset = 300;
    const body = document.body;

    // Debounce function to limit the rate at which the scroll event triggers
    function debounce(func, wait) {
        let timeout;
        return function(...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, args), wait);
        };
    }

    const toggleBodyClass = debounce(() => {
        if (window.scrollY > offset) {
            body.classList.add('show');
        } else {
            body.classList.remove('show');
        }
    }, 50); // Adjust debounce delay as needed

    window.addEventListener('scroll', toggleBodyClass);
});
</script>

Then in footer, the button was placed as the final element in the last container. The button was fixed in the advanced settings and the css below was added into the css section for the button.

selector{
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
body.show selector{
    opacity: 1;
}

ET VOILÀ!

This technique is an adaptation of Jim Fahad’s solution but without jquery.