Use anchor tags within Foundation Section with deep linking

Question

We are using Foundation Section with deep linking. We must be able to link to each tab from other parts of the site.

The content of each tab is also quite long and has a side nav with anchor links to items within each tab, but the anchor links don't work with deep linking turned on.

site.com/section#Tab <- Works for getting to the tab

site.com/section#Tab#Anchor and site.com/section#Anchor <- Does not work

Is there a work around for this or should I write a scroll to function and not use anchors at all?

Answer 1

Sort of hacked it using rels on spans in the side nav and anchors in the content, and return false to make sure the # doesn't show up in the url.

JS:

$('.side-nav span').on('click',function(){
    var hash = $(this).attr('rel');
    var anchor = $('#'+hash);

    $('html, body').animate({
        scrollTop: $(anchor).offset().top -30
    }, 1000);

    return false;

});