tab links scroll upward

Hey webworm72,

Thank you for using Enfold.

That is the default behaviour of opening a tab content — it makes certain that the tab title is visible in the viewport. It doesn’t really help in your case because of how the tab element is used in the page. If you want to change that behaviour, edit the config-templatebuilder > aviashortcodes > tabs > tabs.js file. Look for this code around line 144 and remove it.

if(win.scrollTop() > el_offset)
{
$(‘html:not(:animated),body:not(:animated)’).scrollTop(scoll_target);
}

Toggle the File Compression afterwards if it’s enabled.

Best regards,
Ismael

Hi,

Thank you for the update.

You have to edit the files via FTP. The tabs.js file is located in wp-content > themes > enfold > config-templatebuilder > aviashortcodes > tabs folder. And if you want to override the shortcodes from your child theme, please follow this short tutorial.

// https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb

Add that snippet in the functions.php file, then create a new folder called “shortcodes” inside the child theme directory. You can override any shortcodes by creating a copy of the parent shortcode files (config-templatebuilder > aviashortcodes) inside the child theme’s “shortcodes” folder.

In your case, look for the tabs folder, copy it and move it inside the child theme’s shortcodes folder. Edit the tabs.php file, look for this code around line 75 of the extra_assets function:

 //load css
			wp_enqueue_style( 'avia-module-tabs' , AviaBuilder::$path['pluginUrlRoot'].'avia-shortcodes/tabs/tabs.css' , array('avia-layout'), false );

			//load js
			wp_enqueue_script( 'avia-module-tabs' , AviaBuilder::$path['pluginUrlRoot'].'avia-shortcodes/tabs/tabs.js' , array('avia-shortcodes'), false, TRUE );

Replace it with:

//load css
			wp_enqueue_style( 'avia-module-tabs' , get_stylesheet_directory_uri() . '/shortcodes/tabs/tabs.css' , array('avia-layout'), false );

			//load js
			wp_enqueue_script( 'avia-module-tabs' , get_stylesheet_directory_uri() . '/shortcodes/tabs/tabs.js' , array('avia-shortcodes'), false, TRUE );

You can then modify the tabs.js file in the child theme.

Best regards,
Ismael

Hi,

Thank you for the update.

Did you toggle the Performance > File Compression settings after the modification? The changes will not take affect until the scripts are regenerated.

Best regards,
Ismael

Hi,

By “toggle”, I mean disabling and reenabling the compression right after doing the modification, not before. Do the modification, toggle the performance options to regenerate the scripts including the recent changes and toggle the compression back. Or just disable it completely during testing.

Best regards,
Ismael

Hi,

Thanks for the update.

Can we have access to the file server? And please set the WP account’s user role to admin. We would like to test the modification.

Best regards,
Ismael

Hi,

The password is incorrect. Can you edit it a bit? Please remove the comma at the very start.

Status: Check your login credentials. The entered password starts or ends with a space character.

Thank you for the update.

Best regards,
Ismael

Hi,

Thank you for the update.

We disabled the default scroll_top method and set it to scroll to the top after clicking the tab anchor.

setTimeout(function(){
   window.scrollTo(0, 0);
}, 0);	

Best regards,
Ismael

Hi,

Glad it worked.

Yes, we can see the issue. Please look for this line on the same file.

window.scrollTo(0, container.offset().top - 70);

Replace it with:

window.scrollTo(0, 0);

Best regards,
Ismael

Hi Tony,

Great, I’m glad that Ismael could help you out and thanks for the kind feedback :-)

You can leave a review on the Themeforest page if you like: https://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990.

I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

Best regards,
Rikard