Disable scroll to content when using Foundation Tabs

Question

I am using Foundation 5.5.3, and I'm having a serious problem with the content tabs. I've tried everything I can think of, but for some reason whenever a user clicks on a tab, it scrolls the page down to the content. I'm not using deep linking, as I understand there's some issue with deep linking/scroll to content.

Here's an example of the html:

<ul class="tabs" data-tab data-options="scroll_to_content: false">
    <li class="tab-title active"><a href="#tab1">Tab 1</a></li>
    <li class="tab-title"><a href="#tab2">Tab 2</a></li>
</ul>
<div class="tabs-content">
    <div id="tab1" class="content active">
        <p>Tab 1 content</p>
    </div>
    <div id="tab2" class="content">
        <p>Tab 2 content</p>
    </div>
</div>

Yet it still scrolls to the content when the tab is clicked. I'm at a loss, any help would be greatly appreciated.

Answer 1

Put together a solution with some help from this answer .

The issue seems to stem from the way MixPanel handles tracking links. It intercepts the click action, does some tracking stuff, and then manually directs the browser to where it should be going. This is normally fine, but Foundation tries to disable the default action when clicking on a content tab. MixPanel then comes along and ignores that, sending the browser to the link anyway, causing the scrolling issue.

Disabling link tracking altogether solves the issue, but that also means that we're collecting a lot less useful data. So I went around trying to find a way to disable link tracking on in-page links. That's where the answer above came in handy, as it's a neat little function that allows using a jQuery selector in determining which links to track.

Instead of the standard link tracking setup, I used the provided delegate_links method, as such:

mixpanel.delegate_links(document.body, 'a:not([href^=#])', 'Clicked Link');

That ignores any links starting with # , so it disables tracking on the in-page links. Normal links are tracked as they were, but the tab specific links no longer trigger MixPanel, and the browser no longer scrolls to the content on click.