Scroll to tab content on menu tab item click in WooCommerce single products

I use the jQuery code embedded in a PHP function to scroll to tab content when a menu tab item is clicked in WooCommerce single products. The product tabs are layout to be underneath each other. The code scroll the users to the product tab content when it clicks on product menu tab item title.

This is my code attempt:

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');

But when the page is loaded, the page auto scroll down to the product tabs (without clicking or anything).

How to avoid that?

Try the following instead to avoid auto scrolling on page load (code is commented):

function custom_tab_scroll_script() {
    ?>
    <script type="text/javascript">
    jQuery(function($) {
        // Add a light delay to avoid auto scrolling on page load
        setTimeout(function(){
            // Event handler for tab title click
            $(document.body).on('click', '.woocommerce-tabs ul.tabs li a', function() {
                const tabContentId = $(this).attr('href'); // Get the href value of the clicked tab

                // Add a small delay to allow the corresponding content to be displayed before
                setTimeout(function(){
                    // 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
                }, 50);
            });
        }, 250);
    });
    </script>
    <?php
}
add_action('wp_footer', 'custom_tab_scroll_script');

Code goes in functions.php file of your child theme (or in a plugin). Tested and works.