Javascript scroll to sections and also scroll to section but open relevant nav-tab

[ianhaney]

Hi

I have a nav menu that has links in it that scroll to the relevant section which does seem to work but also got other links in the same nav menu that scroll to the relevant section but also has nav-tabs tab-pane code in that I would like to open when click on the link, for example I have the following code in the nav menu

<nav id="nav">
                                    <div id="bs-example-navbar-collapse-1">
                                        <ul class="menus" id="mainMenu">
                                            <li><a href="#home" class="parent-link scrolllink">Home</a></li>
                                            <li><a href="#about" class="parent-link scrolllink">About</a></li>
                                            <li><a data-toggle="tab" href="#sideglass" class="parent-link scrolllinktwo" aria-controls="#sideglass">Side Glass</a></li>
                                            <li><a data-toggle="tab" href="#glassreardoors" class="parent-link scrolllinktwo" aria-controls="#glassreardoors">Glass Rear Doors</a></li>
                                            <li><a data-toggle="tab" href="#doorhandleslocks" class="parent-link scrolllinktwo" aria-controls="#doorhandleslocks">Door Handles &amp; Locks</a></li>
                                            <li><a data-toggle="tab" href="#gasstruts" class="parent-link scrolllinktwo" aria-controls="#gasstruts">Gas Struts</a></li>
                                            <li><a href="#contact" class="parent-link scrolllink">Contact</a></li>
                                        </ul>
                                        <div id="mobileMenu"></div>
                                    </div>
                                </nav>

I would like the Home link to scroll to the home section of the webpage and the Glass Rear Doors link for example to scroll to the section where the tabs are but to also open the tab-pane for Glass Rear Doors to show the relevant content

I got the following code so far, it kind of works but is messy as I have to click on the Glass Rear Door link twice in the nav menu and each one scrolls up that bit further

My nav tab code is below

<ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="sideglass-tab" data-toggle="tab" href="#sideglass" role="tab" aria-controls="sideglass" aria-selected="true"><i class="flaticon-battery"></i>Side Glass</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="glassreardoors-tab" data-toggle="tab" href="#glassreardoors" role="tab" aria-controls="glassreardoors" aria-selected="false"><i class="flaticon-break"></i>Glass Rear Doors</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="doorhandleslocks-tab" data-toggle="tab" href="#doorhandleslocks" role="tab" aria-controls="doorhandleslocks" aria-selected="false"><i class="flaticon-seat-belt"></i>Door Handles &amp; Locks</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="gasstruts-tab" data-toggle="tab" href="#gasstruts" role="tab" aria-controls="gasstruts" aria-selected="false"><i class="flaticon-settings"></i>Gas Struts</a>
                </li>
            </ul>

<div class="tab-content">
                <div class="tab-pane fade show active" id="sideglass" role="tabpanel" aria-labelledby="sideglass-tab">
                    <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <div class="single-service">
                                <i class="flaticon-battery"></i>
                                <h3>Side Glass</h3>
                                <p>
                                    Tell us what your car needs or ask for a diagnostic. Receive a free, fast, fair & transparent price quote.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="glassreardoors" role="tabpanel" aria-labelledby="glassreardoors-tab">
                    <div class="row">
                        <div class="col-lg-12 col-md-12">
                            <div class="single-service">
                                <i class="flaticon-battery"></i>
                                <h3>Glass Rear Doors</h3>
                                <p>
                                    Tell us what your car needs or ask for a diagnostic. Receive a free, fast, fair & transparent price quote.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

The javsacript is below

<script>
    $('#bs-example-navbar-collapse-1 a.scrolllinktwo[data-toggle="tab"]').click(function(e) {
      e.preventDefault()
      $("#myTab [href=" + e.target.hash + "]").tab('show')
    });

    $('a.scrolllinktwo[data-toggle="tab"]').on('shown.bs.tab', function(e) {
      var divId = $(e.target).attr("href")
      $('html,body').animate({
        scrollTop: $(divId).offset().top
      }, 500);
    });
    
    $('a.scrolllink, a.scrolllinktwo').click(function(event){
        event.preventDefault()
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top - 300
    }, 500);
    return false;
});
    
  </script>

 

[CodeMonkeyJ]

The problem appears to be that your shown.bs.tab function is never being called. Try changing your selector:

   $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
      var divId = $(e.target).attr("href")
      $('html,body').animate({
        scrollTop: $(divId).offset().top
      }, 500);
    });

 

[ianhaney]

Thank you really appreciate it, I did it a slightly different way and looks to be working

 

[CodeMonkeyJ]

For my curiosity and future readers, what was your solution?

 

[ianhaney]

For my curiosity and future readers, what was your solution?

No probs, I did it the following way

<li><a href="#link2" class="parent-link scrolllink" data-tab="glassreardoors">Glass Rear Doors</a></li>

<ul class="nav nav-tabs" id="my-tab-link" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="glassreardoors-tab" data-toggle="tab" href="#glassreardoors" role="tab" aria-controls="glassreardoors" aria-selected="false"><i class="flaticon-settings"></i>Glass Rear Doors</a>
    </li>
</ul>

<div class="tab-content" id="my-tab-content">
    <div class="tab-pane fade show active" id="glassreardoors" role="tabpanel" aria-labelledby="glassreardoors-tab">
        <div class="row">
            <div class="col-lg-12 col-md-12">
                <div class="single-service">
                    <i class="flaticon-battery"></i>
                    <h3>Glass Rear Doors</h3>
                    <p>
                        There are 3 different designs.
                        <br><br>
                        Fully framed rear doors come colour coded to the overall colour of the pick-up top and are normally available as a single piece of glass that is bonded into the frame. All the hinges , handles and ancillary items are attached to the frame and not the glass.
                        <br><br>
                        Semi framed rear doors normally have a black fiberglass bottom, weather strip or an internal strengthening section and the handles - door locks - hinges - gas struts are attached directly through the glass.
                        <br><br>
                        Frameless rear doors have no internal strengthening and no external fiberglass or weather strip. The hinges, gas struts and handles are attached through or directly on the glass.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $('a.scrolllink').click(function() {
        /**
         * check to see if we are targeting sub tabs
         */
        if ($(this).attr('href') === "#link2") {
            scrollLink($(this).attr('data-tab'));
        }

        /**
         * smooth scrolling to section
         */
        $('html, body').animate({
            scrollTop: $($(this).attr('href')).offset().top
        }, 500);
        return false;
    });
</script>

/**
 *
 * @param {*} tab tab id used to set active tab
 */
function scrollLink(tab) {
    /**
     * removing active class from all nav links
     */
    $("#my-tab-link")
        .find(".nav-link")
        .each(function (index, element) {
            $(element).removeClass("active");
        });

    /**
     * removing active class from all tab content
     */
    $("#my-tab-content")
        .find(".tab-pane")
        .each(function (index, element) {
            $(element).removeClass("active");
            $(element).removeClass("show").removeClass("active");
        });

    /**
     * setting active class for nav tab-content
     */
    $("#" + tab)
        .addClass("show")
        .addClass("active");

    /**
     * set active calss for navlink
     */
    $("#" + tab + "-tab").addClass("active");
}