AUI Tabs: why clicking on a tab makes automatically a short scroll down?

[Nicolas Casel]

I am using the AUI Tabs:

https://docs.atlassian.com/aui/latest/docs/tabs.html

Before I click on a tab, here is my viewport:

viewport-before-click.png

After I have clicked, it automatically makes a short scroll down, so the tabs are no longer displayed:

viewport-after-click.png

What is the reason? How to solve it?

Thanks in advance,

[Nicolas Casel · Accepted solution]

I've found a workaround via this Javascript function:

<script language="JavaScript" type="text/javascript">

// We use AUI tabs-menu and want to prevent automatic 'scroll down' when clicking on tab that display very large content:
function bgenScroll() {
 if (window.pageYOffset!= null){
 st=window.pageYOffset+'';
 }

if (document.body.scrollWidth!= null){
 if (document.body.scrollTop){
 st=document.body.scrollTop;
 }
 st=document.documentElement.scrollTop;
 }

setTimeout('window.scroll(0,st)',10);
}

</script>

then, calling this function in the <a> tag:

<li class="menu-item">
 <a href="#tabs-example-third" onclick="bgenScroll();">Activity</a>
 </li>

[Peter Geshev]

Hi Nicolas,

As a workaround I have noticed that if you don't specify ids to the aui tab page macros there is no scrolling.

Regards,

Peter

[Nicolas Casel]

Thanks Peter for your feedback.

However, if I remove this 'tabs-example-first' id:

<div class="tabs-pane active-pane" id="tabs-example-first">

Now when I click on the tab:

<li class="menu-item active-tab">
 <a href="#tabs-example-first">Page</a>
 </li>

the content of the tab is no longer displayed...

So, how can I relate the content of the div to this 'example-first' tab?