1

I'm struggling with adding a jQuery scroll function to nav-tab (Bootstrap 3). I want the user to be able to select the tab they want and within the tab content, have a link which smoothly scrolls to an anchor. This is my code probably with loads of errors:

   <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>

I found this jQuery function here Smooth scrolling when clicking an anchor link, but not sure where to place it.

    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;
    });
Community
  • 1
  • 1
Andy14
  • 59
  • 1
  • 2
  • 12

1 Answers1

0

This will smoothly scroll to the anchor ID when clicking the tab. 

$(document).ready(function() {      
        // Animate the scroll
        $('#tabID').click(function(event) {
            event.preventDefault();             
            $('html, body').animate({scrollTop:  $('#anchorId').offset().top }, 300);
        })
    });
MilkyTech
  • 1,919
  • 2
  • 15
  • 39
  • Thanks Chris. where abouts do I add this? Cheers – Andy14 May 30 '14 at 15:14
  • like all of your js, should be added to the end of your page before the `

    ` tag. After you load jQuery. You could alternatively put your js inside your `

    ` but then the rest of the document won't load until your js finishes loading, so placing it at the end of the document is better.

     – MilkyTech May 30 '14 at 15:26
  • I think I know whats happening. I have another js running which is conflicting the above code. Will have a play about. Thank you for the help Chris – Andy14 May 30 '14 at 16:05
  • to avoid js conflicts, replace `$` with `jQuery` and you shouldn't have a problem – MilkyTech May 30 '14 at 16:09