CODEWITHSUNDEEP
tabszurb-foundationzurb-foundation-5
Thallyson Dias
Thallyson Dias

Reputation: 171

How add a offset in tabs deep_link zurb foundation?

I am using the tabs of code

<div class="row tabs-home" >
<dl class="tabs text-center " data-tab data-options="deep_linking:true"> 
    <dd><a href="#panel0">CRS</a></dd>
    ...
    <dd><a href="#panel5">Soluções Marketing</a></dd>  
</dl>

have a header with "position: fixed", and clicking on the tab scroll occurs [IMAGE 2], but is below the header. it is necessary to click on the tab there is an offset header [IMAGE 3] [enter image description here]1

I tried changing the foundation.tab.js. and added the line 207 from foundation.tab.js

if (settings.deep_linking) {

            if (settings.scroll_to_content) {

                // retain current hash to scroll to content
                go_to_hash(location_hash || target_hash);

                if (location_hash == undefined || location_hash == target_hash) {
                    tab.parent()[0].scrollIntoView();
                    tab.parent()[0].animate({  scrollTop: $('#tab-fixed').offset().top + 200  });
                } else {
                    S(target_hash)[0].scrollIntoView();
                }
            } else {
                // prefix the hashes so that the browser doesn't scroll down
                if (location_hash != undefined) {
                    go_to_hash('fndtn-' + location_hash.replace('#', ''));
                } else {
                    go_to_hash('fndtn-' + target_hash.replace('#', ''));
                }
            }
        }

this

 tab.parent()[0].animate({  scrollTop: $('#tab-fixed').offset().top + 200  });

How do I when click, the scroll has an offset of the header?

Upvotes: 0

Views: 438

Answers (1)

Thallyson Dias
Thallyson Dias

Reputation: 171

Ok, i resolve this situation with um scrolltop in jquery and remove thhis deep_link

        //SCROLL TAB
        $(document).ready(function(){
            $('#tab-fixed').on('click', function(){
                $('html,body').animate({scrollTop: $(this).offset().top - 190}, 500);
            }); 
        });

HTML

<section id="tab-fixed" class="clearfix">
<div id="line-tabs" class="clearfix">
    <div class="row tabs-home" >
        <dl class="tabs text-center " data-tab> 
            <dd><a href="#crs-panel1">CRS</a></dd>
             ...
            <dd><a href="#crs-panel3">Soluções Marketing</a></dd>  
        </dl>
    </div>
</div>

Upvotes: 1

Related Questions