Question

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

   <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

单击选项卡时，这将平滑地滚动到锚点ID。

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

添加jQuery Nav-tab添加Bootstrap

1 个答案: