Menu icon Foundation
Tabs - Deep linking without scroll from other pages

Hi everyone,

I have tabs in one of my website pages on which I disabled the scroll with data-options="scroll_to_content: false".
However, when I link these tabs with href="pagewithtabs.html#tab-1" from other pages of my website, it scroll down to the tabs.

How can I prevent the scroll when I come from other pages of the website.

Thanks! :)

tabsdeeplinkinghashlinkdeep linkingscroll

Hi everyone,

I have tabs in one of my website pages on which I disabled the scroll with data-options="scroll_to_content: false".
However, when I link these tabs with href="pagewithtabs.html#tab-1" from other pages of my website, it scroll down to the tabs.

How can I prevent the scroll when I come from other pages of the website.

Thanks! :)

Ben Egan over 4 years ago

Hi Eric,

If you are using deep linking and you don't want to scroll to content on load add the following to your "dl" element:

data-options="deep_linking:true; scroll_to_content:false;"

So your tabs links should look like this:

<dl class="tabs" data-tab data-options="deep_linking:true; scroll_to_content:false;">
  <dd class="active"><a href="#panel1">Tab 1</a></dd>
  <dd><a href="#panel2">Tab 2</a></dd>
  <dd><a href="#panel3">Tab 3</a></dd>
  <dd><a href="#panel4">Tab 4</a></dd>
</dl>

Hope this helps!

Ben.

Jay Todtenbier over 4 years ago

Thanks. Didn't realize I needed to use both parameter values separated by a ; inside of a single data-options. Was using data-options two times and it was only taking the second one. Works great now.

Alex Strelnikov over 4 years ago

Hi all,
I have one problem with tabs. It's about link to another page. I have code like that:

<ul class="tabs" data-tab data-options="deep_linking:true; scroll_to_content:false;">
                  <li class="tab-title active"><a href="#panel1">Tab1</a>
                  </li>
                  <li class="tab-title"><a href="#panel2"><i class="fa fa-wrench"></i> Tab2</a>
                  </li>
                  <li class="tab-title"><a href="#panel3">Tab3</a>
                  </li>
                  <li class="tab-title"><a href="#panel4">Tab4</a>
                  </li>
                  <li class="tab-title some-custom-class"><a href="http://google.com/" target="_blank">EXTERNAL LINK</a>
                  </li>
                  <li class="tab-title"><a href="#panel6">Tab6</a>
                  </li>
                  <li class="tab-title sc-tab right"><a href="#panel7">Tab7</a>
                  </li>
                </ul>

I need to go at Google page in new tab by click on a tab, but it's not work( I added data-options="deep_linking:true; scroll_to_content:false;" to but it's not helped( What I have to do with this problem?
Thanks.

Adam Bundy almost 2 years ago

Posting in hopes that someone else solved this. I have a site running Fdn 5.2.3 and figured out how to get deep linking working with scroll to content set to false, but now instead of jumping down to the tabs, the window jumps to the top every time a tab is clicked. I tried attaching a preventDefault and also a return false to click of the tabs, but this stops all functionality altogether. Is there any way to have deep linking on but have the page not scroll at all when a tab is clicked, the way the non-deep-linking tabs do?

Thanks! 

-Adam