Balbooa Help Center: [Accordion] scroll page to accordion header tab (1/1)

5 years 4 months ago #1

Renato
Posts: 84

Hi guys! How are you?

Is it possible to, when opening an accordeon tab, the screen scroll to the accordeon header?

I ask this because when you're seeing one accordeon tab item, and click in the next tab, the screen doesn't follow and the user have to scroll up to the begin of the accordeon item.

I don't know if i was clear, but i think it's a known behavior of the accordeon and one client asked if it's possible to change.

I'll send a "contact us" message regarding this post to give us an access to see the "problem" happening.

Thank you!

5 years 4 months ago #2

Vyacheslav
Posts: 26073

Hello,

You need for this accordion add custom class"custom-accordion"
and at the Code Editor add JS code:

jQuery("document").ready(function($){
	jQuery('.custom-accordion').on('shown', function(e){
	 var position = jQuery('a[href="#'+e.target.id+'"]').offset().top;
	    jQuery('html, body').animate({
	        scrollTop: position
	    }, 'slow');
	});
});

Regards,
Vyacheslav, Balbooa.com

5 years 4 months ago #3

Renato Posts: 84	Bullseye! Thank you very much Vyacheslav!
	The administrator has disabled public write access.

5 years 4 months ago #4

Vyacheslav Posts: 26073	You are welcome
	The administrator has disabled public write access.

5 years 4 months ago #5

Thomas
Posts: 147

I got same thing with my page, so the code makes some more better experience, cause the tab does not disappear to top of page or under nav bar.

In my page there are many tabs in three rows beside, so whole screen is scrolling up all the time, if you want to read all content of tabs..
I am wondering why screen does move at all..is there a way to keep all other content fix and just open the clicked tab to move down?

Thanks for help

Thomas

5 years 4 months ago #6

Vyacheslav Posts: 26073	Hello, We can offer you tj add a max-height . But for this, we need a link to a page with a problem. Regards, Vyacheslav, Balbooa.com
	The administrator has disabled public write access.

5 years 4 months ago #7

Thomas Posts: 147	Thx Thomas
	Last Edit: 5 years 4 months ago by Thomas. The administrator has disabled public write access.

5 years 4 months ago #8

Vyacheslav Posts: 26073	Hello, Send us FTP access and Joomla admin access via our contact form. support.balbooa.com/contact-us Regards, Vyacheslav, Balbooa.com
	The administrator has disabled public write access.

5 years 4 months ago #9

Artem Posts: 10812	Hi, Thomas! We can recommend you next: 1. Delete this JS code from the Gridbox JavaScript editor support.balbooa.com/forum/gridbox/2949-a...ion-header-tab#13255 2. Disable this plugin in your Joomla System - Smooth Scroll Anchors Let us know results Many thanks, Artem, Balbooa.com
	The administrator has disabled public write access.

5 years 4 months ago #10

Thomas Posts: 147	Hey Guys, it works fine as it should now Great Job!
	The administrator has disabled public write access.

5 years 4 months ago #11

Artem Posts: 10812	No problem Feel free to contact us and have a nice day! Many thanks, Artem, Balbooa.com
	The administrator has disabled public write access.

1 month 2 weeks ago #12

Robert Andreas Posts: 63	Did anyone get this working with the current Gridbox versions?
	The administrator has disabled public write access.

1 month 2 weeks ago #13

Artem
Posts: 10812

Hi there,

Just tested it, works fine, looks like you forgot to add a class suffix custom-accordion

If you need to add this JS to all accordions on site (without class suffix), use this js

jQuery("document").ready(function($){
	jQuery('.ba-item-accordion').on('shown', function(e){
	 var position = jQuery('a[href="#'+e.target.id+'"]').offset().top;
	    jQuery('html, body').animate({
	        scrollTop: position
	    }, 'slow');
	});
});

Regards,
Artem, Balbooa.com

1 month 2 weeks ago #14

Robert Andreas Posts: 63	Worked flawless If you want to now scroll to the very top, you can make a small edit (120px as an example): scrollTop: position - 120 Thanks again!
	The administrator has disabled public write access.

1 week 3 days ago #15

Kristian Posts: 35	You guys are awesome! Thanx a lot!
	The administrator has disabled public write access.

1 week 2 days ago #16

Vyacheslav Posts: 26073	You are welcome! Let us know if you need more assistance! Best Regards, Vyacheslav, Balbooa Support Team
	The administrator has disabled public write access.

1 week 2 days ago #17

Dave Posts: 1279	This is very interesting! I was struggling with this issue as well. Thank you for this information!
	The administrator has disabled public write access.

1 week 1 day ago #18

Vyacheslav Posts: 26073	Please feel free to ask any questions. Have a nice day! Best Regards, Vyacheslav, Balbooa Support Team
	The administrator has disabled public write access.

5 days 6 hours ago #19

Qbik Posts: 598	great solution, please consider to add this as option for acordion plugin
	The administrator has disabled public write access.

5 days 4 hours ago #20

Artem Posts: 10812	Yes, a very popular topic, probably the most popular on the forum. It's time to close it, by adding the option "Scroll" to the accordion Regards, Artem, Balbooa.com
	The administrator has disabled public write access.

5 days 3 hours ago #21

Dave Posts: 1279	Artem, we all appreciate you!
	The administrator has disabled public write access.