Offset data-deep-link - how to?

Hey everyone,

Have the data-deep-link=“true” enabled and all is working fine. However, it it seems to be jumping the tabs to the top of the page when I execute, however I have one of those fancy small overlay menus that comes up as you scroll down the page.

So, wondering if anyone has a .JS snippet they want to share for offsetting where the data-deep-link shows on the page? i.e. if I wanted it to offset by say 150px from the top of the page?

data-deep-link-smudge is not helping any.

Please and thank you (and help!).


I should expand on this further… this should only happen when the user uses the “data-deep-link” function… i.e. if they are on the home page, want to go to another page to open the tabs. Again, this works fine, it is just the horizontal position which is the issue.

I don’t want this to affect the user if they just visit the page with the tabs on it.

Would this solve your issue?

This is great @DanielRuf thanks. Assuming it needs to be set to =“true” or is it a number offset? Does it also need to be used with data-deep-link-smudge=“true”? Doesn’t seem to be working for me as set to data-deep-link-smudge-offset=“true”.

This is what i am using:

<ul class="grid-x grid-margin-x tabs" data-tabs id="interestedTabsCS" data-active-collapse="true" data-deep-link="true" data-deep-link-smudge-offset="true">


This PR is still open and not yet merged. It accepts a number (which is used for the px offset calculation).

Ah perfect, just what I wanted to hear! Thanks @DanielRuf

Can you test if this solves your problem by downloading the unminified foundation.js file, changing the needed lines and testing with this?

Might not be until later this evening when I test… but for reference, can you tell me which line in the foundation.js file I need to update (sorry, must have missed this note).

Not sure, you can see in the PR which changes have to be done and check the lines around them to find the right place. Currently not at a desktop so I can not check the big dist file at the moment.

Ah ok, no worries… will check it later. Thanks.

So, been playing around with this a bit, adding px to the offset and without the px and it doesn’t look to be working.

<ul class="grid-x grid-margin-x tabs" data-tabs id="interestedTabsCS" data-deep-link="true" data-deep-link-smudge="true" data-deep-link-smudge-offset="1000">

So, any suggestions for updating JS file let me know.


Without px. Did you already update / modify foundation.js?