平滑滚动和引导表导航答案

【问题标题】：Smooth Scroll and Bootstrap Table Navs平滑滚动和引导表导航
【发布时间】：2018-10-16 21:19:36
【问题描述】：

我有这段代码，效果很好；它平滑滚动到哈希/ID并减去标题的高度。

$(document).ready(function($) {
        $('a[href^="#"]').bind('click.smoothscroll', function(e) {
            e.preventDefault();

            var hash = this.hash;

            jQuery('html, body').animate({
                scrollTop: jQuery(hash).offset().top - 45
            }, 1500, function(){});
        });
    });

但是，我在同一页面上也有一个带有导航链接/选项卡的引导表。

<ul class="nav nav-pills nav-justified" id="myTab" role="tablist">
            <li class="nav-item">
              <a class="nav-link" id="all-units-tab" data-toggle="tab" href="#all-units" role="tab" aria-controls="all-units" aria-selected="true">all-units</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" id="small-tab" data-toggle="tab" href="#small" role="tab" aria-controls="small" aria-selected="false">Small</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="medium-tab" data-toggle="tab" href="#medium" role="tab" aria-controls="medium" aria-selected="false">Medium</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="large-tab" data-toggle="tab" href="#large" role="tab" aria-controls="large" aria-selected="false">Large</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="rv-vehicle-tab" data-toggle="tab" href="#rv-vehicle" role="tab" aria-controls="rv-vehicle" aria-selected="false">Vehicle</a>
            </li>
          </ul>

我的问题是：当我单击其中一个导航选项卡时，它显然是与哈希/id 相关联的 href，因此当我单击它时，它会顶起滚动并不断减去标题的高度（- 45) 以及使用户在单击选项卡链接时无法滚动。

有没有一种方法可以让导航选项卡正常工作并且平滑滚动到 id 功能，而当用户单击导航选项卡时不会发生平滑滚动？

我应该将选项卡更改为过滤数据的药丸或按钮，就像选项卡一样，否则会导致同样的问题吗？

欢迎任何帮助

【问题讨论】：

标签： javascript jquery

【解决方案1】：

添加.not 选择器以过滤掉nav-links：

$('a[href^="#"]').not('.nav-link').bind('click.smoothscroll', function(e) {

【讨论】：