BlueOwlCreative » Topic: Scroll back to the top when switching between tabs?

Scroll back to the top when switching between tabs?

andriusk — Fri, 06 May 2016 08:47:31 +0000

Hi guys,

I am using vertical tabs (http://sitedemo.proreact.dk/ibg-moduler/).
When i switch between tabs, can i make it always start from the top? Because if i dont, then i have to manually scroll up each time i open a new tab at the bottom of the screen…

This is even bigger of an issue when using it on the mobile phone.

Please help, if it’s possible. Thanks in advance!

Reply To: Scroll back to the top when switching between tabs?

BlueOwl — Mon, 09 May 2016 09:44:07 +0000

Hi there,

EDit your common.js file and replace this:

//console.log($(e.target).attr("aria-controls"));

with this:

setTimeout(function() {
	$('.resp-accordion.resp-tab-active')[0].scrollIntoView();
}, 500);

Reply To: Scroll back to the top when switching between tabs?

andriusk — Tue, 10 May 2016 14:02:31 +0000

I found the common.js file, but i couldnt find this line:
//console.log($(e.target).attr(“aria-controls”));

Is there something that im doing wrong?…
Thanks a lot for your help and your patience

Reply To: Scroll back to the top when switching between tabs?

BlueOwl — Wed, 11 May 2016 07:33:37 +0000

It’s there, I can see it in your file too:

http://sitedemo.proreact.dk/wp-content/themes/fortuna/js/common.js?ver=4.5.2

Reply To: Scroll back to the top when switching between tabs?

andriusk — Wed, 11 May 2016 09:05:28 +0000

Thanks for the help, we found the file

However, we do have a fixed menu so we need an offset added to the scroll. Right now the top of the content is hidden beneath the menu.

Is there any way we have that? please…

Reply To: Scroll back to the top when switching between tabs?

BlueOwl — Wed, 11 May 2016 09:09:31 +0000

Looks fine to me, it scrolls to the beginning of the tab content…?

Reply To: Scroll back to the top when switching between tabs?

andriusk — Wed, 11 May 2016 09:27:12 +0000

Hi again,

I just tried again (both on Safari and Chrome), and it looks like it scrolls to the beginning of the tab, BUT it doesnt take into account that there’s a menu on top of it

So the end result is that the top of the tab is not visible because of this.
Is it possible to set and offset, or maybe do something else so that the whole tab would be visible?

THANKS guys..

Reply To: Scroll back to the top when switching between tabs?

BlueOwl — Wed, 11 May 2016 11:31:22 +0000

You could additionally add some space like so:

document.body.scrollTop -= 20;

Reply To: Scroll back to the top when switching between tabs?

andriusk — Fri, 13 May 2016 12:49:32 +0000

Thanks! I think we’re almost there

that line:
document.body.scrollTop -= 20;

where should i add it?

Reply To: Scroll back to the top when switching between tabs?

BlueOwl — Sat, 14 May 2016 07:55:49 +0000

Within the previous code like so:

setTimeout(function() {
	$('.resp-accordion.resp-tab-active')[0].scrollIntoView();
        document.body.scrollTop -= 20;
}, 500);