Deep link and open tab

Hey westefan,
This was added a while back and works on my install without any added code. Ensure that you add a custom ID to each tab:

and use a link with the ID “elements/tabs#tabthree” the page will scroll up and open the tab”

If you are using the sticky header and the tab is too close to the header, you can add this code to the end of your child theme functions.php file in Appearance ▸ Editor to adjust the position:

function custom_script() { ?>
  <script>
(function($) {
$(document).ready(function() {
    $('a[href^="#"]').click(function(e) {
        var targetHash = this.hash;
        setTimeout(function() {
            $('html, body').animate({
                scrollTop: $(targetHash).offset().top - 100
            }, 500);
        }, 100);
    });
    
    if (window.location.hash) {
        $('html, body').animate({
            scrollTop: $(window).scrollTop() - 100
        }, 500);
    }
});
}(jQuery));
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

Best regards,
Mike

Hi,

Thank you for the update.

Please try this script instead:

function ava_custom_script_tab_section_scroll() {
    ?>
    <script type="text/javascript">
        (function($) {
            function avGetHashFromEvent(event, target) {
                if (event === 'load') {
                    return window.location.hash;
                }
                var locationHash = $(target).attr('href');
                return locationHash ? locationHash.substring(locationHash.indexOf('#')) : '';
            }

            function avScrollToTab(hash) {
                if (!hash) return;

                var tab = $('.av-section-tab-title[href="' + hash + '"]');
                var parentContainer = tab.closest('.av-tab-section-outer-container');

                if (tab.length && parentContainer.length) {
                    var position = parentContainer.offset().top;

                    tab.trigger('click');

                    setTimeout(function() {
                        $('html, body').animate({ scrollTop: position - 100 }, 500);
                    }, 300);
                }
            }

            function avTriggerScrollToTab(selector, event) {
                $(selector).on(event, function(e) {
                    var hash = avGetHashFromEvent(event, this);
                    avScrollToTab(hash);
                });
            }

            $(document).ready(function() {
                var tabs = $('.av-tab-section-container');
                if (tabs.length === 0) return;

                avTriggerScrollToTab('.menu-item a', 'click');

                $(window).on('load', function() {
                    avScrollToTab(window.location.hash);
                });
            });
        })(jQuery);
    </script>
    <?php
}
add_action('wp_footer', 'ava_custom_script_tab_section_scroll', 9999);

Best regards,
Ismael

Hi!

Thank you for the update.

We adjusted the script a bit — please try it again. If it’s still not working, please provide the login details in the private field so that we can test it.

function ava_custom_script_tab_section_scroll() {
    ?>
    <script type="text/javascript">
        (function($) {
            function avScrollToTab(hash) {
                if (!hash) return;

                var anchorElement = $('[href="' + hash + '"]');
                var parentTab = anchorElement.closest('.av-layout-tab');
                var tabSectionId = parentTab.data('tab-section-id');

                if (tabSectionId) {
                    var targetTab = $('.av-section-tab-title[href="#' + tabSectionId + '"]');
                    if (targetTab.length) {
                        var position = targetTab.offset().top;

                        targetTab.trigger('click');

                        setTimeout(function() {
                            $('html, body').animate({ scrollTop: position - 100 }, 500);
                        }, 300);
                    }
                }
            }

            $(document).ready(function() {
                $(window).on('load', function() {
                    avScrollToTab(window.location.hash);
                });
            });
        })(jQuery);
    </script>
    <?php
}
add_action('wp_footer', 'ava_custom_script_tab_section_scroll', 9999);

Best regards,
Ismael

Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike