I use the following piece of Jquery combined into a php function to do the following; the woocommerce producttabs are layedout to be underneath each other. The code scroll the users to the producttab-content of the click producttab-title.

The fault that I cannot tackle is that the user is scrolled automatically to the producttabs-area on page not (without clicking or anything).

How can I fix that? What did I do wrong or need to add?

Here is the code active: https://staging.kozijnkeus.nl/product/kozijn-voor-schuifpui-3-vaks/
This is the code:

function custom_tab_scroll_script() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            var tabClicked = false; // Flag to track if a tab title has been clicked

            // Event handler for tab title click
            $('.woocommerce-tabs ul.tabs li a').click(function(event) {
                tabClicked = true; // Set the flag to true when a tab title is clicked
                event.preventDefault();
                var tabContentId = $(this).attr('href'); // Get the href value of the clicked tab

                // Scroll to the tab content
                $('html, body').animate({
                    scrollTop: $(tabContentId).offset().top - 100 // Adjust the offset as needed
                }, 500); // Adjust the scroll speed if necessary
            });

            // Prevent automatic scrolling to product tabs on page load
            $(window).on('load', function() {
                if (!tabClicked) {
                    // If no tab title has been clicked, do nothing
                    return;
                }
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'custom_tab_scroll_script');

The fault that I cannot tackle is that the user is scrolled automatically to the producttabs-area on page not (without clicking or anything).

How can I fix that? What did I do wrong or need to add?