Question

我有这段代码，效果很好；它会平滑滚动到哈希值/ 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(){});
        });
    });

但是，我在同一页面上也有一个带有nav-links / tabs的引导表。

<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），以及如果用户单击标签页链接也无法滚动。

有没有办法让我仍然具有nav-tabs功能和平滑滚动到id功能，而当用户单击nav选项卡时却没有平滑滚动？

我应该将标签更改为类似于标签那样过滤数据的药丸或按钮，还是会导致相同的问题？

欢迎任何帮助

Answer 1

添加一个.not选择器以过滤掉nav-link：

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

平滑滚动和自举表导航

1 个答案: