单击选项卡标题后滚动到选项卡内容[错误]

Question

我使用以下一段 Jquery 组合成一个 php 函数来执行以下操作； woocommerce 产品选项卡的布局位于彼此下方。代码将用户滚动到单击产品选项卡标题的产品选项卡内容。

我无法解决的错误是用户自动滚动到页面上的产品选项卡区域（无需单击或任何其他操作）。

我该如何解决这个问题？我做错了什么或者需要补充什么？

这是活动代码：https://staging.kozijnkeus.nl/product/kozijn-voor-schuifpui-3-vaks/ 这是代码：

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

我无法解决的错误是用户自动滚动到页面上的产品选项卡区域（无需单击或任何其他操作）。

我该如何解决这个问题？我做错了什么或者需要补充什么？

Answer 1

请尝试以下操作以避免页面加载时自动滚动（代码已注释）：

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

代码位于子主题的functions.php 文件中（或插件中）。已测试并有效。