Bootstrap：HTML 锚在 button/footer 中不起作用

Question

我无法让锚点 links (#) 在我页面的某些部分中运行，该部分是基于 boostrap css 主题创建的。

当从按钮内访问时，Bootstrap 中的 Plugins.js 似乎会破坏锚点 link。

在下面的示例中，“查看更多”按钮在单击时不会执行任何操作（其颜色仅更改为禁用颜色），但如果使用右键单击并使用“打开方式”则可以使用。在页面其他地方使用的相同锚点 link 可以正常工作。

<div class="single_tab_content">
   <div class="head_title">
       <h4>TITLE</h4>
          <div class="separator2"></div>
   </div>
   <p>Some sample text</p>
    <a href="#portfolio" class="btn btn-primary">SEE MORE</a>
</div>

plugins.js 本身太长，无法粘贴到此处，但它是 bootstrap 主题中使用的未经编辑的标准。

有谁知道解决这个问题的方法吗？

Answer 1

在您的 main.js 文件中，您有此代码

只需在 class .navbar-collapse 之后添加 class .footer_widget 然后一切正常

 $('.navbar-collapse, .footer_widget').find('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: (target.offset().top - 40)
                }, 1000);
                if ($('.navbar-toggle').css('display') != 'none') {
                    $(this).parents('.container').find(".navbar-toggle").trigger("click");
                }
                return false;
            }
        }
    });

Bootstrap：HTML 锚在 button/footer 中不起作用

Bootstrap: HTML anchors not working from button/footer

html

anchor

twitter-bootstrap