WooCommerce单产品页面：点击标签滚动，如何阻止页面加载自动滚动？

问题描述 #

我用嵌入PHP的jQuery代码，实现WooCommerce单产品页面点击标签项时滚动到对应内容（标签是上下布局），但现在页面加载时会自动向下滚动到产品标签区域，不需要任何点击操作。我的代码尝试如下：

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

问题原因 #

页面加载时自动滚动，主要是两个原因：

1. URL中带有标签锚点（比如#tab-description），浏览器会自动定位到对应ID的元素
2. 原代码里的tabClicked标记逻辑完全无效——页面加载时tabClicked默认是false，load事件里的判断等于什么都没做，根本没法阻止自动滚动

解决方案 #

修改代码，直接在页面加载时重置滚动位置，同时确保标签点击时的自定义滚动逻辑正常工作：

function custom_tab_scroll_script() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // 页面加载时强制回到顶部，阻止自动滚动到锚点
            $('html, body').scrollTop(0);

            // 标签点击事件处理
            $('.woocommerce-tabs ul.tabs li a').click(function(event) {
                // 阻止默认的锚点跳转行为
                event.preventDefault();
                var tabContentId = $(this).attr('href');
                
                // 自定义滚动到对应标签内容
                $('html, body').animate({
                    scrollTop: $(tabContentId).offset().top - 100 // 可根据需求调整偏移量
                }, 500); // 可调整滚动速度
            });

            // 额外处理：清空URL中的标签锚点，彻底避免浏览器自动定位
            if (window.location.hash && $(window.location.hash).hasClass('woocommerce-Tabs-panel')) {
                history.replaceState(null, null, ' ');
            }
        });
    </script>
    <?php
}
add_action('wp_footer', 'custom_tab_scroll_script');

关键修改说明 #

• 去掉了无用的tabClicked标记和load事件判断，直接在document.ready里强制把滚动条拉回顶部，解决URL锚点导致的自动滚动
• 保留event.preventDefault()，确保点击标签时不会触发浏览器默认的锚点跳转，只执行自定义滚动动画
• 添加了清空URL锚点的逻辑，彻底避免浏览器因锚点存在而自动定位

内容的提问来源于stack exchange，提问作者Robert Sietsma