如何在选项卡deep_link zurb基础中添加偏移量？

Question

我正在使用代码的选项卡

<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>

​

有一个标题与“位置:固定”，并点击标签滚动发生2，但在标题之下。点击标签有必要有一个偏移头图像3。

]1

我试着改变了foundation.tab.js。并添加了foundation.tab.js中的第207行

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('#', ''));
                }
            }
        }

这

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

如何在单击时，滚动有一个偏移的标题？

Answer 1

好的，我用jquery中的um滚动顶解决了这种情况，并删除了这个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>

​