如何在 tabs deep_link zurb foundation 中添加偏移量？

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>

有一个 header 和 "position: fixed"，点击选项卡会滚动 [IMAGE 2]，但在 header 下方。有必要单击选项卡有一个偏移 header [IMAGE 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  });

点击时，滚动有header的偏移怎么办？

Answer 1

好的，我在 jquery 中使用 um scrolltop 解决了这种情况并删除了它 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>

如何在 tabs deep_link zurb foundation 中添加偏移量？

How add a offset in tabs deep_link zurb foundation?

tabs

zurb-foundation

zurb-foundation-5