Clicking VC Tab Causes Page to Scroll Down Past Content

[generalAmanda]

Hi ThemeCo,

I have a site with X Theme enabled with full Visual Composer. I have an issue when a user clicks a tab in a three-tab layout. The user is directed further down the page than the tab content.

I have tried the solutions in this thread: https://theme.co/apex/forums/topic/page-scrolls-up-and-down-when-clicking-on-tab-nav-items-and-accordian-items/ and none worked for me.

This site is password protected. I am happy to provide credentials, but not sure if this thread is public or not.

Thanks!
Amanda

[rad]

Hi there,

Thanks for posting.

Your credentials are safe within a secure note

As for the issue, I can’t seem to replicate it. This is what’s happening on my end.

https://www.dropbox.com/s/ffb7ginh8ftmm27/bandicam%202017-07-01%2014-05-56-535.mp4?dl=0

It just jump but it still scroll on right position. Or should it be not moving at all?

And what OS you’re testing it with?

Thanks!

[generalAmanda]

Hi iam,

I apologize for the late reply. We had a long holiday break.

You might need to zoom in on the webpage to mimic the resolution that we are testing with (both in Safari and Chrome). Please try zooming in so that the page is the same with as the browser and try again.

Upon further examination, it seems that the page scrolls down too far and then returns up to the top of the tab area after a few seconds. Is this expected?

It really would be nice if there wasn’t a scroll action at all on tab click. Is that possible?

Thanks,
Amanda

[nabeel]

Hi again,

To stop the jumps, just add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery( function($) {
	$('.vc_tta-tab a').on('click', function( e ){
		setTimeout( function() { 
			$('html, body').stop().stop();
		}, 100 );
	});
	$(document).ready(function() {
		$('.vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta-tab a').off('click touchstart touchend');
	});

});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[generalAmanda]

@Nabeel

jQuery( function($) {
$(’.vc_tta-tab a’).on(‘click’, function( e ){
setTimeout( function() {
$(‘html, body’).stop().stop();
}, 100 );
});
$(document).ready(function() {
$(’.vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta-tab a’).off(‘click touchstart touchend’);
});

});

Perfect! Thank you so much!

[nabeel]

Glad we could help.

Cheers!