jquery - 添加 jQuery Nav-tab 添加 Bootstrap

Question

我正在努力将 jQuery 滚动功能添加到 nav-tab (Bootstrap 3)。我希望用户能够选择他们想要的选项卡，并在选项卡内容中有一个可以平滑滚动到 anchor 的链接。这是我的代码，可能有很多错误:

   <div class="container_navtab">

        <script>
    $('#myTab a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
    })
    $('#myTab a[href="#profile"]').tab('show') // Select tab by name
    $('#myTab a:first').tab('show') // Select first tab
    $('#myTab a:last').tab('show') // Select last tab
    $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)  

    </script>

            <ul class="nav nav-tabs">
    <li><a href="#buildingcontracts" data-toggle="tab">Bulding Contracts</a></li>
    <li><a href="#landscaping" data-toggle="tab">Landscaping</a></li>
    <li><a href="#maintenance" data-toggle="tab">Maintenance</a></li>
    <li><a href="#consultations" data-toggle="tab">Consultations</a></li>
    <li><a href="#casestudies" data-toggle="tab">Case Studies</a></li>
    </ul>
            </div>

    <div class="tab_container">
    <!-- Tab panes -->
    <div class="tab-content">

    <div class="tab-pane fade in active" id="buildingcontracts"><p>Building Contracts:
   Introduction  The company has successfully operated in the Hull and surrounding  areas for the past ten years working on both small and large scale construction, repair, and alteration projects. With the business boom that is occurring in our local area and the desire to improve overall profit margins, the company is planning to shift its target 
    <a href="services.html#build" >Take me there..</a></p></div>

我在这里找到了这个 jQuery 函数 Smooth scrolling when clicking an anchor link ，但不确定将它放在哪里。

    var $root = $('html, body');
    $('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
    scrollTop: $(href).offset().top
    }, 500, function () {
    window.location.hash = href;
    });
    return false;
    });

Answer 1

这将在单击选项卡时平滑地滚动到 anchor ID。

$(document).ready(function() {      
        // Animate the scroll
        $('#tabID').click(function(event) {
            event.preventDefault();             
            $('html, body').animate({scrollTop:  $('#anchorId').offset().top }, 300);
        })
    });