Anchor Links Not Scrolling to Tab Section Tabs

Please note that the top link in the main navigation is set to go to the tab section on the page and to open tab number 1 but that also isn’t working as expected.

Ok so we deactivated all the plugins with no change in the menu anchor link behavior. The main issue is the anchor link to the tabs don’t tell the browser to scroll to the tab section on the page. Only if we use a section ID for the anchor will the browser scroll to the tabbed section and then it’ll only open to the tab designated in the tab section edit screen (see screenshot in private area).

Any idea what might be causing this behavior? Thanks!

We do have the script added to the functions.php file in the child theme directory and it helped in that the menu anchor link now goes directly to the selected tab. Although the browser still does not scroll down to the tabbed content. The user is expecting to go to the content described in the link but instead may think the link is broken.

Very strange that this used to work as expected last summer ie both anchor links to target tab AND scrolling down the page so all the tabbed content is above the fold.

@ismael, you should be able to see the issue on my client’s site. Credentials and page URL are located in private area. And yes your 2017 demo does have the same issue as Jay points out. Again, all this worked fine several updates ago when we first started playing with using the tab element feature.

One thing we noticed was anchoring to the tab section. For whatever reason that will have the browser scroll to the tab section and has a function in the avia element builder to designate which tab to open to. Seems we simply need a similar function to scroll to the tab section and open to a specific tab.

Hope this helps solve the mystery of the busted tab element UI. :)

Hi Ismael, we turn off access for security purposes. it’s accessible now for you. Please comment on what’s been modified so we can replicate on production. Thanks!

Hi Ismael, thanks for updating the script. It looks like it works when clicking on the main nav when on the page where the tabbed content resides. Unfortunately if you’re on any other page and click on the link to the tabbed content found in the main nav menu, the target tab opens but doesn’t scroll down to the tabbed content.

Is there additional script to force the browser to scroll to the tabbed content when clicking from a different page with the same URL that contains the tabbed content anchor? Thanks!

Thanks Ismael! Works great.

For future enfold customers is this the script that fixed the problem?
// CUSTOM SCRIPT ANCHOR LINKS TO OPEN SCROLL TO TABBED CONTENT
add_action( ‘wp_footer’, ‘ava_custom_script_tab_section’ );
function ava_custom_script_tab_section() {
?>
<script type=”text/javascript”>
(function($) {
function scrollToTab(s, e,) {
$(s).on(e, function(event) {
var anchor, loc, cur, hash, tab, parent, pos;

if( e == ‘load’ ) {
loc = window.location.hash;
hash = loc;
} else {
loc = $(this).attr(‘href’);
hash = loc.substring(loc.indexOf(‘#’));
}

tab = $(‘.av-section-tab-title[href=’+ hash +’]’);
parent = tab.parents(‘.av-tab-section-outer-container’);
pos = parent.offset();

tab.trigger(‘click’);

if(hash) {
setTimeout( function() {
$(window).scrollTop( pos.top – 100 )
}, 500 );
}
});
}

scrollToTab( ‘.menu-item a’, ‘click’ );
scrollToTab( window, ‘load’ );
})(jQuery);
</script>
<?php
}

// custom script
//add_action( ‘wp_footer’, ‘ava_custom_script’ );
function ava_custom_script() {
?>
<script type=”text/javascript”>
(function($) {
function a() {
$(‘.menu-item’).on(‘click’, ‘a’, function(e) {
var anchor, loc, cur, hash, tab, parent, pos;
anchor = $(this).attr(‘href’);
hash = anchor.substring(anchor.indexOf(‘#’));
tab = $(‘a[href=’+ hash +’]’);
parent = tab.parent(‘.av-tab-section-tab-title-container’);
pos = parent.offset();

tab.trigger(‘click’);
if(hash) $(window).scrollTop( pos.top – 100 );
});
}

a();
})(jQuery);
</script>
<?php
}
?>

• This reply was modified 6 years, 11 months ago by Eric.